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.