我希望实现点击锚标记并滚动到页面上的元素的效果。
我已经使用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'部分现在点击页面的一半,而不是在视口的底部对齐。
由于
答案 0 :(得分:6)
获取视口的高度$(window).height()
将页面滚动到$(元素).offset()。top - ($(window).height() - $(元素).height())
答案 1 :(得分:1)
试试这样:
var section = $(this.hash);
var scrollPos = section.offset().top + section.height() - $(window).height();
答案 2 :(得分:0)
答案Here显示如何滚动页面,以便所选元素与窗口顶部对齐。
至于您将其与底部对齐的请求,我已更正了链接帖子中的代码:
基本上你要做的就是减去窗口高度和元素高度,如下所示:
$('html, body').animate({
scrollTop: $("#wmd-input").offset().top - $("#wmd-input").height() - $(window).height()
}, 2000)
我的示例中的#wmd-input元素是此页面中的答案文本区域,在浏览器中打开开发人员控制台,粘贴代码并在工作中查看
(或您有答案区域的任何其他问题)