jQuery的:$(window).scrollTop()但没有$(window).scrollBottom()


86

每当用户滚动页面时,我想在页面底部放置一个元素。就像“固定位置”一样,但是我不能使用“位置:固定” css,因为我的客户的许多浏览器都不支持。

我注意到jquery可以获取当前视口的顶部位置,但是如何获取滚动视口的底部位置呢?

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

Answers:


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

17
您会认为,如果它是如此简单,它可以作为.scrollBottom()包含在核心框架中。奇怪..
Curt

38
滚动Top是从文档Top到可见窗口的垂直像素数Top。与scroll完全相反Top,scrollBottom应该测量从文档Bottom到可见窗口的垂直像素数Bottom(即下面的Alfred回答)。什么给出了从文档垂直像素的#_top_至可见的窗口Bottom。可以肯定地说,这很有用,尽管不能称之为ScrollBottom的反义词(我知道这是一个明显的答案,但对于像我这样的未来读者而言)
DeepSpace101

1
如果与顶部的距离可以变化,则此解决方案将不起作用。例如,如果我有一个<div>,它必须与页面底部保持一定距离,并且该页面具有可扩展/可折叠的项目,则它将更改正文高度,并因此更改与底部的距离。
斯普林斯普林斯

@crashspringfield实际上,这是一个不同的问题。这个问题是关于将事物放置在视口底部附近而不是页面底部附近。
iPherian

88

我要说,与scrollTop直接相反的scrollBottom应该是:

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

2
完美,这就是我想要的...谢谢!
ℛɑƒæĿᴿᴹᴿ

9

为了将来,我将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);

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

我认为最好滚动底部。


2

这将滚动到最顶部:

$(window).animate({scrollTop: 0});

这将滚动到最底部:

$(window).animate({scrollTop: $(document).height() + $(window).height()});

..如有必要(用引号引起来),将窗口更改为所需的容器ID或类。


如何为固定高度div的底部设置动画,以overflow-y: auto使其实际滚动到文本底部(超出div的高度)?
user1063287

如果对其他人有帮助,请更新我的问题:我认为要使用的属性可能是scrollHeight-参见: stackoverflow.com/q/7381817
user1063287

0

这是滚动到表格网格底部的最佳选择,它将滚动到表格网格的最后一行:

 $('.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
请避免仅回答代码,并提供一些解释。
MickaelB。

-3

这是一个快速技巧:只需将滚动值分配给很大的数字即可。这将确保页面滚动到底部。使用普通的javascript:

document.body.scrollTop = 100000;

在超过100000像素的页面上将不起作用。这似乎是一个非常极端的情况,但是在无尽的滚动页面之类的情况下,这并不是不可能的。如果您确实想要没有jquery的解决方案,那么答案可能是一个更好的选择。
lucash

ya,重点是使用尽可能大的数字,例如999999999999999999999999999999。–
拔下
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.