jquery - 如何使浏览器底部滚动到div底部

Question

我正在尝试生成这种效果，即当您单击按钮时，页面将滚动到 div 并将浏览器的底部与 div 的底部对齐。我一直在搞乱 scrollTop() 和 offset() 但还没有让它工作。有任何想法吗？

Answer 1

您可以使用以下代码

var wHeight = $(window).height(); // Height of view port
var eOffset = $('#elementID').offset().top; // Y-offset of element
var eHeight = $('#elementID').height(); // Height of element

$(window).scrollTop(eOffset - wHeight + eHeight); // See below for explanation

解释

1. 您将 设置.scrollTop()为将元素放置在窗口顶部的元素的 y 偏移量
2. 然后减去将元素从屏幕上移开的视口高度（就在下方）
3. 然后添加元素的高度以将视口底部与浏览器底部对齐

Answer 2

我会用.scrollHeight:

$("#div1").animate({ scrollTop: $("#div1").scrollHeight}, 1000);

已编辑

那是因为你必须计算高度等

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

Answer 3

$("#button").click(function() {
     $('html, body').animate({
         scrollTop: $("#elementtoScrollToID").offset().top
     }, 2000);
 });

取自http://www.abeautifulsite.net/blog/2010/01/smoothly-scroll-to-an-element-without-a-jquery-plugin/