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

Posted 2023-03-10

【中文标题】jQuery在页面加载时移动到锚点位置

【英文标题】：jQuery move to anchor location on page load

【发布时间】：2012-02-11 15:26:21

【问题描述】：

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

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

当页面加载时，我需要页面自动向下滚动（不需要动画）到#header，所以除非向上滚动，否则用户无法看到 About Us div。

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

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

任何帮助将不胜感激。

【问题讨论】：

在这里回答相关问题：***.com/questions/2905867/…

【参考方案1】：

说明

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

查看我的示例和这个jsFiddle Demonstration

样本

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

更多信息

jsFiddle Demonstration

jQuery.scrollTop() jQuery.offset()

【讨论】：

感谢您的回答...这正是我所需要的，但我无法让它最终发挥作用。如果有任何区别，我正在使用预编码的店面（因此我无法更改结构），并且使用 .insertBefore 方法将 About Us div 放置在标题之前。那会导致它不起作用吗？谢谢。

抱歉我迟到了，我在厨房里 ;) 看起来你是 jQuery 新手，对吧？您必须等到 DOM 完全构建完成。我的答案和小提琴已更新。希望这会有所帮助，如果不再问我的话。

很高兴为您提供帮助！祝你有美好的一天！

也许我遗漏了什么，但为什么这比 document.getElementById("header").scrollIntoView() 更好？

【参考方案2】：

你试过 JQuery 的scrollTo 方法吗？ http://demos.flesler.com/jquery/scrollTo/

或者您可以扩展 JQuery 并添加您的自定义mentod：

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

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

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

【讨论】：

很酷的函数:) 你也可以让函数把动画速度作为一个变量。谢谢！

【参考方案3】：

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

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

jQuery 实际上不是必需的。

【讨论】：

鉴于“不需要动画”，我认为这是最简单的解决方案。

哇，这完全救了我的培根在一个无关的事情上。非常非常感谢克里斯 :-)