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

Respostas:


148
var scrollBottom = $(window).scrollTop() + $(window).height();

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 //

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

4
var scrollBottom =
    $(document).height() - $(window).height() - $(window).scrollTop();

Eu acho que é melhor obter a rolagem inferior.


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


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');
 });

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;
});


0
var scrolltobottom = document.documentElement.scrollHeight - $(this).outerHeight() - $(this).scrollTop();

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;

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
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.