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

【问题标题】：How to make bottom of browser scroll to bottom of div如何使浏览器底部滚动到div底部
【发布时间】：2013-07-19 21:41:18
【问题描述】：

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

【问题讨论】：

你目前有什么代码？
我已经放置了所有的 div 并设置了所有的 onclick 事件，我所需要的只是实际的滚动部分。

标签： jquery html css scroll

【解决方案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 偏移量
然后减去将元素从屏幕上移开的视口高度（就在下方）
然后添加元素的高度以使视口底部与浏览器底部对齐

【讨论】：

当我调整屏幕大小时它工作不正常，我将其更改为 scrollTop(eOffset - wHeight) 以确保它将屏幕移动到元素的正上方，但它有几个空格起来。
但是您确实设法让它按您的意愿工作？如果没有，您可以链接到该网站吗？
不，它不起作用，我更改了参数以进行试验，但它的行为与预期不符。而且我在本地网站上工作，所以不能分享它：/
创建一个 jsfiddle 怎么样？只是为了澄清......如果你使用(eOffset)，它应该把它放在浏览器窗口的顶部。如果您使用(eOffset - wHeight)，它应该刚好位于底部。如果你使用(eOffset - wHeight + eHeight)，它应该与底部对齐。
您也可以尝试在浏览器中使用 inspect 元素选项来查看元素的边框等位置

【解决方案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/

【讨论】：

我认为这会使浏览器的顶部滚动到 div 的顶部。

【解决方案3】：

我会使用.scrollHeight:

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

已编辑

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

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

【讨论】：