如何使网页加载时首先显示您希望用户首先看到的锚点所在部分？
这是否可能？
提前感谢您所有的帮助。
5个回答
9
这样简单的东西就可以做到。
<body onload=' location.href="#myanchor" '>
<a id='myanchor' href='#'>anchor text</a>
- Kevin Lynch
8
这里是一个比较动态的 2018 年更新。
如果你想要获取 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中添加斜杠。
- Allison Yancy
7
使用 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 onload="moveWindow()">
And your anchor:
<a name="mylocation"></a>
- Christian Stewart
1
非常感谢！我需要一种在Twig URL中设置锚点的方法，以便在抛出异常时跳转到页面上的特定位置。但是这是不可能的，所以我将一个Twig变量放在body标签中，并将其设置为空字符串。然后，如果抛出异常，我会使用JavaScript填充字符串变量，就像你的答案中所示（window.location.hash="foo"），并将其添加到页面的渲染中：<body {{ anchor | raw }}>。 - paidforbychrist
0
Jake Scott的答案最终对我有用。
如果有人像我一样是新手，请确保将其放置在头标签中，可能就在结束标签上方，并复制下面带标签的完整脚本（我希望人们能考虑到这一点，为我们这些需要确切细节的新手）。
<script type="text/javascript">
window.addEventListener('load', function() {
if (location.hash) location.href = location.hash;
});
</script>- AdobeOneKenobi
0
这些答案的混合最终对我来说是最好的选择，并且具有动态性，通过从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;
}
- Jake Scott
1
1在大括号后面缺少闭合括号。请使用})而不是}。同时它无法正常工作 :-( - user1953366
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接