如何使页面加载到锚标记？答案

【问题标题】：How to make the page load to an anchor tag?如何使页面加载到锚标记？
【发布时间】：2013-05-03 21:55:15
【问题描述】：

我怎么能或者有可能做到这一点，当网页加载时，它首先显示给你的是页面的一部分，锚标记是你希望人们首先看到的地方。

有可能吗？

提前感谢所有帮助。

【问题讨论】：

【解决方案1】：

这样简单的事情就可以了

<body onload=' location.href="#myanchor" '>
<a id='myanchor' href='#'>anchor text</a>

【讨论】：

【解决方案2】：

使用 javascript。

解决方案 1

文档加载后，转到您想要的“哈希”或锚点

<script type="text/javascript">
function load()
{
window.location.hash="mylocation"; 
}
</script>

解决方案 2

在标题中：

<script type="text/javascript" language="javascript">
    function moveWindow (){window.location.hash="mylocation";}
</script>

在body标签上：

<body onload="moveWindow()">

还有你的主播：

<a name="mylocation"></a>

【讨论】：

非常感谢！如果抛出异常，我需要一种方法在 Twig URL 中设置锚点以转到页面上的特定位置。无法完成，因此，我在 body 标记中放置了一个 twig 变量并将其设置为空字符串。然后，如果抛出异常，我用 javascript 填充字符串变量，如您的答案所示（window.location.hash="foo"），并将其添加到页面的渲染中：.

【解决方案3】：

这是一个更加动态的 2018 年更新。

如果您想拉出 URL，从 URL 中拉出锚点，然后将页面移动到该锚点，您可以在页面加载时运行此 javascript。

if (window.location.href.indexOf('#') == 0) {
    let hash = window.location.href.split('#')[1];
    let hashTop = document.querySelector(`#${hash}`).offsetTop;
    window.scrollTop = hashTop;
}

还有一种更简洁的方式。

if (location.hash) {
    let target = location.hash;
    window.scrollTop = document.querySelector(target).offsetTop;
}

如果你不使用 babel 编译 ES6，只需将 let 关键字更改为 var。这也适用于 WordPress，它会在 URL 中的锚点之前添加一个斜杠。

【讨论】：

【解决方案4】：

事实证明，这些答案的混合对我来说是最好的选择，并且通过从 URL 中拉取锚点并强制页面加载到预期的目标，具有动态的优势：

if (location.hash) location.href = location.hash;

对于我的项目来说，这是最干净的解决方案，因为有许多其他东西在 onload 运行：

JQuery:

$(window).on("load", function() {
    if (location.hash) location.href = location.hash;
}

香草：

window.addEventListener('load', function() {
    if (location.hash) location.href = location.hash;
}

【讨论】：

大括号后缺少右括号。而不是 } 使用 })。它也不起作用:-(

【解决方案5】：

杰克斯科特的回答终于对我有用。如果有人像我一样是菜鸟，请确保将其放在您的头标签中，也许就在结束标签的正上方，并从下面复制带有标签的完整脚本（我希望人们会考虑这样做，对于我们这些菜鸟谁需要确切的细节）。

<script type="text/javascript">
    window.addEventListener('load', function() {
       if (location.hash) location.href = location.hash;
    });
</script>

【讨论】：