jquery: $(window).scrollTop() 但没有 $(window).scrollBottom()答案

【问题标题】：jquery: $(window).scrollTop() but no $(window).scrollBottom()jquery: $(window).scrollTop() 但没有 $(window).scrollBottom()
【发布时间】：2011-06-07 00:25:00
【问题描述】：

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

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

所以我问怎么知道：$(window).scrollBottom()

【问题讨论】：

标签： javascript jquery

【解决方案1】：

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

【讨论】：

你会认为如果它像这样简单，它可以作为 .scrollBottom() 包含在核心框架中。奇怪..
滚动Top 是从文档Top 到可见窗口Top 的垂直像素数。与滚动Top 完全相反，滚动Bottom 应该测量从文档Bottom 到可见窗口Bottom 的垂直像素数（即Alfred 在下面的回答）。 this 给出的是从文档_top_ 到可见窗口Bottom 的垂直像素数。它肯定很有用，但不能将其称为 ScrollBottom 的反面（我知道这是一个明显的答案，但对于像我这样的未来读者）
如果与顶部的距离不同，此解决方案将不起作用。例如，如果我有一个必须与页面底部有一定距离的
并且页面有可展开/可折叠的项目，它将改变正文高度，从而改变与底部的距离。
@crashspringfield 实际上这是一个不同的问题。这个问题是关于将东西放在视口底部而不是页面底部。

【解决方案2】：

我会说与 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 //

【讨论】：

完美，这就是我要找的……谢谢！

【解决方案3】：

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

我认为最好是底部滚动。

【讨论】：

【解决方案4】：

对于未来，我已经将 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);

【讨论】：

【解决方案5】：

这将滚动到最顶部：

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

这将滚动到最底部：

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

.. 如有必要，将窗口更改为所需的容器 ID 或类（用引号括起来）。

【讨论】：

如何使用overflow-y: auto 动画到固定高度div 的底部，使其真正滚动到文本底部（超出div 的高度）？
更新我的问题，以防它帮助其他人：我认为要使用的属性可能是scrollHeight - 请参阅：stackoverflow.com/q/7381817

【解决方案6】：

这是表格网格滚动到底部的最佳选项，它将滚动到表格网格的最后一行：

 $('.add-row-btn').click(function () {
     var tempheight = $('#PtsGrid > table').height();
     $('#PtsGrid').animate({
         scrollTop: tempheight
         //scrollTop: $(".scroll-bottom").offset().top
     }, 'slow');
 });

【讨论】：

【解决方案7】：

这是一个快速的技巧：只需将滚动值分配给一个非常大的数字。这将确保页面滚动到底部。使用纯 JavaScript：

document.body.scrollTop = 100000;

【讨论】：

这不适用于超过 100000 像素的页面。这似乎是一个非常边缘的情况，但是在无休止的滚动页面之类的情况下，这并不是不可能的。如果你真的想要一个没有 jquery 的解决方案，this 答案可能是一个更好的选择。
是的，关键是使用尽可能大的数字，比如 999999999999999999999999999999。

【解决方案8】：

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

【讨论】：

【解决方案9】：

尝试：

 $(window).scrollTop( $('body').height() );

【讨论】：

【解决方案10】：

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

【讨论】：

请避免只回答代码并提供一些解释。

【解决方案11】：

对于我页面中的项目：

document.getElementById(elementId).scroll(0,
 document.getElementById(elementId).scrollHeight);

function scrollBottum(elementId){
   document.getElementById(elementId).scroll(0, document.getElementById(elementId).scrollHeight);
}

<html><div><button onclick="scrollBottum('myCart')">Click me to scroll</button></div>
<div id="myCart" style="height: 50px; overflow-y: scroll;">
  <div>1: A First ...</div>
  <div>2: B</div>
  <div>3: C</div>
  <div>4: D</div>
  <div>5: E</div>
  <div>6: F</div>
  <div>7: LAST !!</div>
</div>
</html>

【讨论】：

【解决方案12】：

我试过了，效果很好

scrollrev(){
    let x:any= document.getElementById('chat')
    x.scrollTop = -9000;
  }

【讨论】：

您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。

【解决方案13】：

我尝试了该代码，它可以工作

 // scroll top
 scroll(){
    let x:any= document.getElementById('chat')
    x.scrollTop = 9000;
  }
  // scroll buttom
  scrollrev(){
    let x:any= document.getElementById('chat')
    x.scrollTop = -9000;
  }

【讨论】：

您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。