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

Question

我有一个简单的页面设置，例如：

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

当页面加载时，我需要页面自动向下滚动（不需要动画）到#header，因此除非向上滚动，否则用户无法看到关于我们的div。

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

我遇到了this other question并尝试修改我的情况的一些答案，但似乎没有任何效果。

任何帮助都将不胜感激。

Answer 1

描述

您可以使用jQuery的.scrollTop()和.offset()方法

来执行此操作

查看我的示例和此jsFiddle Demonstration

示例

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

更多信息

• 的 jsFiddle Demonstration
• jQuery.scrollTop()
• jQuery.offset()

Answer 2

您是否尝试过JQuery的scrollTo方法？ http://demos.flesler.com/jquery/scrollTo/

或者你可以扩展JQuery并添加你的自定义指导：

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

然后你可以像这样调用这个方法：

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

Answer 3

将此放在页面底部的结束Body标记之前。

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

实际上并不需要jQuery。