使用 javascript 进行锚点跳转

Question

我有一个经常会被发现的问题。问题是找不到明确的解决方案。

我有两个关于锚点的问题。

主要目标应该是在使用锚点跳转页面时获得一个没有任何散列的漂亮干净的 url。

所以anchors的结构是：

<ul>
    <li><a href="#one">One</a></li>
    <li><a href="#two">Two</a></li>
    <li><a href="#three">Three</a></li>
</ul>

<div class="wrap">
    <a name="one">text 1</a>
    <a name="two">text 2</a>
    <a name="three" class="box">text 3</a>
</div>

好的，如果您单击其中一个链接，则 url 将自动更改为

www.domain.com/page#1

最后这应该只是：

www.domain.com/page

到目前为止，一切都很好。现在第二件事是，当您在互联网上搜索该问题时，您会发现 javascript 作为解决方案。

我找到了这个功能：

function jumpto(anchor){
    window.location.href = "#"+anchor;
}

并使用以下命令调用该函数：

<a onclick="jumpto('one');">One</a>

什么会像以前一样。它将哈希添加到 url。我还添加了

<a onclick="jumpto('one'); return false;">

没有成功。因此，如果有人可以告诉我如何解决这个问题，我将不胜感激。

非常感谢。

原文由 bonny 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您可以获取目标元素的坐标并将滚动位置设置为它。但这太复杂了。

这是一种更懒惰的方法：

 function jump(h){
 var url = location.href; //Save down the URL without hash.
 location.href = "#"+h; //Go to the target element.
 history.replaceState(null,null,url); //Don't like hashes. Changing it back.
 }

这使用 replaceState 来操作 url。如果您还想 支持 IE ，那么您将不得不以 复杂的方式 进行：

 function jump(h){
 var top = document.getElementById(h).offsetTop; //Getting Y of target element
 window.scrollTo(0, top); //Go there directly or some transition
 }​

演示：http: //jsfiddle.net/DerekL/rEpPA/

另一个带过渡的：http: //jsfiddle.net/DerekL/x3edvp4t/

您还可以使用 .scrollIntoView ：

 document.getElementById(h).scrollIntoView(); //Even IE6 supports this

（好吧，我撒谎了。一点也不复杂。）

原文由 Stackoverflow 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

我认为这是更简单的解决方案：

 window.location = (""+window.location).replace(/#[A-Za-z0-9_]*$/,'')+"#myAnchor"

此方法不会 重新加载 网站，并将 焦点 设置在屏幕阅读器所需的锚点上。

原文由 Adam111p 发布，翻译遵循 CC BY-SA 4.0 许可协议