滚动到页面上元素的底部

时间:2014-03-16 18:30:19

标签: javascript jquery plugins scroll

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

我已经使用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'部分现在点击页面的一半,而不是在视口的底部对齐。

由于

3 个答案:

答案 0 :(得分:6)

  1. 获取元素$(element).height()

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

  4. 获取元素$(element).offset().top

  5. 的顶部位置
  6. 将页面滚动到$(元素).offset()。top - ($(window).height() - $(元素).height())

答案 1 :(得分:1)

试试这样:

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

DEMO

答案 2 :(得分:0)

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

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

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

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

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

(或您有答案区域的任何其他问题)