Quero colocar um elemento na parte inferior da página sempre que o usuário rolar a página. É como "posição fixa", mas não posso usar css "position: fixed", pois muitos navegadores dos meus clientes não suportam isso.
Percebi que o jquery pode obter a posição superior da janela de visualização atual, mas como posso obter a parte inferior da janela de visualização de rolagem?
Portanto, estou perguntando como saber: $ (window) .scrollBottom ()
javascript
jquery
Bin Chen
fonte
fonte
Top
é o número de pixels verticais do documentoTop
à janela visívelTop
. Como exatamente o oposto de rolarTop
, rolarBottom
deve medir o número de pixels verticais do documentoBottom
até a janela visívelBottom
(ou seja, a resposta de Alfred abaixo). O que isso dá é o número de pixel vertical do documento_top_
para a janela visívelBottom
. É útil com certeza, embora não possa chamá-lo o oposto de ScrollBottom (eu sei que esta é uma resposta marcada, mas para futuros leitores como eu)Eu diria que um scrollBottom como um oposto direto de scrollTop deveria ser:
var scrollBottom = $(document).height() - $(window).height() - $(window).scrollTop();
Aqui está um pequeno teste feio que funciona para mim:
// SCROLLTESTER START // $('<h1 id="st" style="position: fixed; right: 25px; bottom: 25px;"></h1>').insertAfter('body'); $(window).scroll(function () { var st = $(window).scrollTop(); var scrollBottom = $(document).height() - $(window).height() - $(window).scrollTop(); $('#st').replaceWith('<h1 id="st" style="position: fixed; right: 25px; bottom: 25px;">scrollTop: ' + st + '<br>scrollBottom: ' + scrollBottom + '</h1>'); }); // SCROLLTESTER END //
fonte
Para o futuro, transformei o scrollBottom em um plugin jquery, utilizável da mesma forma que o scrollTop (ou seja, você pode definir um número e ele irá rolar essa quantidade da parte inferior da página e retornar o número de pixels da parte inferior da página ou retornar o número de pixels da parte inferior da página se nenhum número for fornecido)
$.fn.scrollBottom = function(scroll){ if(typeof scroll === 'number'){ window.scrollTo(0,$(document).height() - $(window).height() - scroll); return $(document).height() - $(window).height() - scroll; } else { return $(document).height() - $(window).height() - $(window).scrollTop(); } } //Basic Usage $(window).scrollBottom(500);
fonte
var scrollBottom = $(document).height() - $(window).height() - $(window).scrollTop();
Eu acho que é melhor obter a rolagem inferior.
fonte
Isso irá rolar até o topo:
$(window).animate({scrollTop: 0});
Isso irá rolar até o final:
$(window).animate({scrollTop: $(document).height() + $(window).height()});
.. mude a janela para o id de contêiner ou classe desejada, se necessário (entre aspas).
fonte
overflow-y: auto
modo que ela realmente role até a parte inferior do texto (que se estende além da altura da div)?scrollHeight
- consulte: stackoverflow.com/q/7381817Aqui está a melhor opção de rolar para baixo para a grade da tabela, ela será rolada para a última linha da grade da tabela:
$('.add-row-btn').click(function () { var tempheight = $('#PtsGrid > table').height(); $('#PtsGrid').animate({ scrollTop: tempheight //scrollTop: $(".scroll-bottom").offset().top }, 'slow'); });
fonte
// Back to bottom button $(window).scroll(function () { var scrollBottom = $(this).scrollTop() + $(this).height(); var scrollTop = $(this).scrollTop(); var pageHeight = $('html, body').height();//Fixed if ($(this).scrollTop() > pageHeight - 700) { $('.back-to-bottom').fadeOut('slow'); } else { if ($(this).scrollTop() < 100) { $('.back-to-bottom').fadeOut('slow'); } else { $('.back-to-bottom').fadeIn('slow'); } } }); $('.back-to-bottom').click(function () { var pageHeight = $('html, body').height();//Fixed $('html, body').animate({ scrollTop: pageHeight }, 1500, 'easeInOutExpo'); return false; });
fonte
tentar:
$(window).scrollTop( $('body').height() );
fonte
var scrolltobottom = document.documentElement.scrollHeight - $(this).outerHeight() - $(this).scrollTop();
fonte
Este é um hack rápido: apenas atribua o valor de rolagem a um número muito grande. Isso garantirá que a página seja rolada para o final. Usando javascript simples:
document.body.scrollTop = 100000;
fonte