通过使用javascript锚定跳跃

Question

我有一个经常会被发现的问题.问题是无处可寻找明确的解决方案.

锚有两个问题.

主要目标应该是在使用锚点跳转到页面时获得一个没有任何哈希值的漂亮干净URL.

所以锚的结构是:

<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>

好的,如果您点击其中一个链接,网址将自动更改为

www.domain.com/page#1

最后这应该只是:

www.domain.com/page

到现在为止还挺好.现在第二件事是,当您在互联网上搜索该问题时,您会发现它javascript是一种解决方案.

我找到了这个功能:

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

并调用该函数:

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

会像以前一样.它会将哈希添加到网址中.我还补充道

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

没有成功.所以,如果有人能告诉我如何解决这个问题,我真的很感激.

非常感谢.

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操纵网址.如果你也想要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

_{(好吧,我骗了.这根本不复杂.)}

Answer 2

我认为这是一个更简单的解决方案:

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

此方法不会重新加载网站,并将重点放在屏幕阅读器所需的锚点上.

Answer 3

我没有足够的代表发表评论。

getElementById()如果锚点已设置name但未id设置（不建议这样做，但确实会在野外发生），所选答案中的基于方法将不起作用。

如果您无法控制文档标记（例如 webextension），请记住一些事情。

所选答案中的基础方法location也可以简化为location.replace：

function jump(hash) { location.replace("#" + hash) }