JQuery 在页面加载时移动到锚定位置

我有一个简单的页面设置，比如:

<div id="aboutUs">
About us content...
</div>
<div id="header">
Header content...
</div>

当页面加载时，我需要页面自动向下滚动(不需要动画)到 #header，这样用户就不能看到 About Us div，除非他们向上滚动。

#aboutUs有一个固定的高度，所以不需要任何变量来确定高度或者其他什么... 如果需要的话。

我偶然发现了另一个问题，并试图修改我的情况的一些答案，但似乎没有工作。

如果你能帮忙，我将不胜感激。

146223 次浏览

小开

最佳答案

您可以使用 jQuery 的 .scrollTop()和 .offset()方法来实现这一点

看看我的样品和这个 JsFiddle 演示

$(function() {
$(document).scrollTop( $("#header").offset().top );
});

小开

你试过 JQuery 的 scrollTo方法吗

或者您可以扩展 JQuery 并添加您的自定义补丁:

jQuery.fn.extend({
scrollToMe: function () {
var x = jQuery(this).offset().top - 100;
jQuery('html,body').animate({scrollTop: x}, 400);
}});

然后你可以调用这个方法，比如:

$("#header").scrollToMe();

小开

把它放在页面底部关闭的 Body 标记之前。

<script>
if (location.hash) {
location.href = location.hash;
}
</script>

实际上不需要 jQuery。