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

Question

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

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

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

#aboutUs 有一个固定的高度,所以没有任何变量来确定高度或任何东西......如果甚至需要.

我遇到了另一个问题并尝试修改我的情况的一些答案,但似乎没有任何工作.

任何帮助,将不胜感激.

Answer 1

描述

您可以使用jQuery .scrollTop()和.offset()方法执行此操作

看看我的样本和这个jsFiddle演示

样品

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

更多信息

• jsFiddle示范
• 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.