jquery:$(window).scrollTop()但没有$(窗口).scrollBottom()

Question

我想在用户滚动页面时将元素放在页面底部.这就像"固定位置",但我不能使用"position:fixed"css,因为我的许多客户的浏览器都无法支持.

我注意到jquery可以获得当前视口的顶部位置,但是如何才能获得滚动视口的底部？

所以我问如何知道:$(window).scrollBottom()

Answer 1

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

Answer 2

我会说scrollBottom作为scrollTop的直接对应应该是:

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

这是一个适合我的小丑陋测试:

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

Answer 3

为了将来,我已经将scrollBottom变成了一个jquery插件,可以像scrollTop一样使用(即你可以设置一个数字,它将从页面底部滚动该数量并返回底部的像素数量)的页面,或者,如果没有提供数字,则返回页面底部的像素数)

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