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

<强>解释

您将.scrollTop()设置为将元素放置在窗口顶部的元素的y偏移量
然后您减去视图端口的高度，该视图端口将元素从屏幕上移开（正好在下面）
然后添加元素的高度，使视口底部与浏览器底部对齐

Answer 2

$("#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/

Answer 3

我会使用.scrollHeight:

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

<强> EDITED

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

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

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

3 个答案: