Question

我希望实现点击锚标记并滚动到页面上的元素的效果。

我已经使用jquery scrollTo了。像这样：

$.scrollTo( this.hash, 1500, {
    easing:'easeInOutCubic',
    'axis':'y'
});

但是，我需要对齐它，以便元素在完成动画制作时位于视口的底部。页面上的每个部分都有不同的高度，因此我需要动态获取元素的位置和高度。

我很难弄清楚我需要计算什么数字来实现这个目标。

修改

我现在已将其更改为

var section = $(this.hash);

var scrollPos = $(section).offset().top + ( $(window).height() - $(section).height() );

$('html, body').scrollTop( scrollPos );

但这仍然是错误的，'#about'部分现在点击页面的一半，而不是在视口的底部对齐。

由于

Answer 1

获取元素$(element).height()
获取视口的高度$(window).height()
获取元素$(element).offset().top
将页面滚动到$（元素）.offset（）。top - （$（window）.height（） - $（元素）.height（））

Answer 2

试试这样：

var section = $(this.hash);
var scrollPos = section.offset().top + section.height() - $(window).height();

DEMO

Answer 3

答案Here显示如何滚动页面，以便所选元素与窗口顶部对齐。

至于您将其与底部对齐的请求，我已更正了链接帖子中的代码：

基本上你要做的就是减去窗口高度和元素高度，如下所示：

$('html, body').animate({
    scrollTop: $("#wmd-input").offset().top - $("#wmd-input").height() - $(window).height()
}, 2000)

我的示例中的#wmd-input元素是此页面中的答案文本区域，在浏览器中打开开发人员控制台，粘贴代码并在工作中查看

（或您有答案区域的任何其他问题）

滚动到页面上元素的底部

3 个答案: