logo标签列表

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

javascriptjquery
94
每当用户滚动页面时，我希望将元素放置在页面底部。这类似于“固定定位”，但我不能使用“position: fixed” css，因为我的许多客户端浏览器无法支持它。
我注意到jquery可以获取当前视口的顶部位置，但是如何获取滚动视口的底部？
因此，我的问题是如何知道：$(window).scrollBottom()
13个回答
163
var scrollBottom = $(window).scrollTop() + $(window).height();
20
如果这个操作如此简单，那么应该可以将其包含在核心框架中，例如.scrollBottom()。很奇怪为什么没有。 - Curtis
40
滚动条的“顶部”是从文档“顶部”到可见窗口“顶部”的垂直像素数。作为滚动条“顶部”的完全相反，滚动条“底部”应该测量从文档“底部”到可见窗口“底部”的垂直像素数（即阿尔弗雷德下面所述）。这个结果是从文档“顶部”到可见窗口“底部”的垂直像素数。虽然它很有用，但不能称之为ScrollBottom的相反（我知道这是一个被标记的答案，但对于像我这样的未来读者仍需说明）。 - DeepSpace101
1
如果距离顶部的距离可能会变化，那么这个解决方案就不可行。例如，如果我有一个<div>必须与页面底部保持一定的距离，并且页面具有可展开/折叠的项目，则会更改正文高度，因此与底部的距离也会发生变化。 - crash springfield
@crashspringfield 其实这是一个不同的问题。这个问题是关于将物品放置在视口底部而不是页面底部。 - iPherian
@Curtis，这是因为此解决方案非常特定于情况，并且在各种情况下都无法工作。特别是包括具有自己滚动区域的嵌套div等。 - mesqueeb
94

我认为，作为scrollTop的直接相反方式，scrollBottom应该是：

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

这是一个对我有效的小丑陋测试：

// SCROLLTESTER START //
var showerEl = $('<h1 id="st" style="position: fixed; right: 25px; bottom: 25px;"></h1>')
showerEl.insertAfter('body');

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

  showerEl.html('scrollTop: ' + scrollTop + '<br>scrollBottom: ' + scrollBottom);
});
// SCROLLTESTER END //
3
完美，这正是我正在寻找的...谢谢！ - ℛɑƒæĿᴿᴹᴿ
10

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

我认为最好是获取底部滚动。

3

这将滚动到页面顶部：

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

这将滚动到底部：

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

如果需要的话，将“window”更改为您所需的容器ID或类名（用引号括起来）。

1
如何在具有 overflow-y: auto 的固定高度 div 中向底部进行动画，以便它实际上滚动到文本的底部（该文本超出了 div 的高度）？ - user1063287
1
更新我的问题，以便帮助其他人：我认为要使用的属性可能是 scrollHeight - 参见：https://dev59.com/AWs05IYBdhLWcg3wNPM3。 - user1063287
1
尝试：
 $(window).scrollTop( $('body').height() );
0

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

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

在我的页面中的一个项目：

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>

0

我尝试了一下，它运行得非常好

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

你的回答可以通过提供更多支持信息来改进。请编辑以添加进一步的细节，例如引用或文档，以便他人可以确认你的答案是正确的。您可以在帮助中心中找到有关如何编写良好答案的更多信息。 - Community
0

我尝试了那段代码，它可以正常工作。

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

你的回答可以通过提供更多支持信息来改进。请编辑以添加进一步的细节，例如引用或文档，以便他人可以确认你的答案是正确的。您可以在帮助中心找到有关如何编写良好答案的更多信息。 - Community
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接