jquery: $ (window) .scrollTop () mas não $ (window) .scrollBottom ()

86

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 ()

Bin Chen
fonte

Respostas:

148
var scrollBottom = $(window).scrollTop() + $(window).height();
David Tang
fonte
17
você pensaria que se fosse tão simples assim, poderia ser incluído na estrutura principal como .scrollBottom (). Estranho ..
Curt
38
a rolagem Topé o número de pixels verticais do documento Topà janela visível Top. Como exatamente o oposto de rolar Top, rolar Bottomdeve medir o número de pixels verticais do documento Bottomaté a janela visível Bottom(ou seja, a resposta de Alfred abaixo). O que isso dá é o número de pixel vertical do documento _top_para a janela visível Bottom. É ú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)
DeepSpace101
1
Esta solução não funcionará se a distância do topo puder variar. Por exemplo, se eu tiver um <div> que deve estar a uma certa distância da parte inferior da página e a página tiver itens expansíveis / recolhíveis, ele mudará a altura do corpo e, portanto, a distância da parte inferior.
crash Springfield em
@crashspringfield Na verdade, essa é uma questão diferente. Esta questão é sobre como colocar as coisas perto da parte inferior da janela de visualização, não na parte inferior da página.
iPherian
88

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 //
Alfred
fonte
2
Perfeito, era isso que eu procurava ... Obrigado!
ℛɑƒæĿᴿᴹᴿ de
9

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);
Zephyr
fonte
4
var scrollBottom =
    $(document).height() - $(window).height() - $(window).scrollTop();

Eu acho que é melhor obter a rolagem inferior.

pb2q
fonte
2

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).

snoop_dog
fonte
Como animar a parte inferior de uma div de altura fixa de overflow-y: automodo que ela realmente role até a parte inferior do texto (que se estende além da altura da div)?
user1063287
Atualize minha pergunta caso isso ajude alguém: acho que a propriedade a ser usada pode ser scrollHeight- consulte: stackoverflow.com/q/7381817
user1063287
0

Aqui 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');
 });
SantoshK
fonte
0
// 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;
});
Ghebrehiywet
fonte
0

tentar:

 $(window).scrollTop( $('body').height() );
user944550
fonte
0
var scrolltobottom = document.documentElement.scrollHeight - $(this).outerHeight() - $(this).scrollTop();
gzenakos
fonte
2
Evite responder apenas com código e forneça alguma explicação.
Mickael B.
-3

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;
desconectado
fonte
Isso não funcionará em páginas com mais de 100.000 pixels. Isso pode parecer um caso extremo, no entanto, em casos como páginas de rolagem sem fim, não é improvável. Se você realmente deseja uma solução sem jquery, esta resposta pode ser uma opção melhor.
lucash de
sim, o objetivo é usar um número tão grande quanto possível, digamos 99999999999999999999999999999999.
desconectado em