滚动到页面上元素的底部

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

1. 获取元素的高度$(元素).height()

2. 获取视口的高度$(窗口).height()

3. 得到元素的最高位置$(element).offset().top

4. 将页面滚动到$(元素).offset().top - ($(window).height() - $(element).height())