Question

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

关于锚点我有两个问题。

主要目标应该是使用锚点在页面上跳转时获得一个没有任何哈希值的干净网址。

所以锚点的结构是：

<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来操纵网址。如果您还想要support for IE，则必须执行complicated way：

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

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

test

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

Answer 3

我有一个提示按钮，点击它会打开显示对话框然后我可以写下我想要搜索的内容，然后它会转到页面上的那个位置。它使用javascript来回答标题。

在我的.html文件中：

<button onclick="myFunction()">Load Prompt</button>
<span id="test100"><h4>Hello</h4></span>

在.js文件中我有

function myFunction() {
    var input = prompt("list or new or quit");

    while(input !== "quit") {
        if(input ==="test100") {
            window.location.hash = 'test100';
            return;
// else if(input.indexOf("test100") >= 0) {
//   window.location.hash = 'test100';
//   return;
// }
        }
    }
}

当我将 test100 写入提示时，它将转到我放置的位置id =＆＃34; test100＆＃34;在html文件中。

我使用谷歌浏览器。

注意：这个想法来自于使用

在同一页面上链接

<a href="#test100">Test link</a>

单击时将发送到锚点的

。为了它多次工作，从经验需要重新加载页面。

相信stackoverflow上的人（也可能是stackexchange）也不记得我是如何收集所有的点点滴滴的。 ☺

Answer 4

因为你做的时候

window.location.href = "#"+anchor;

您加载新页面，您可以执行以下操作：

<a href="#" onclick="jumpTo('one');">One</a>
<a href="#" id="one"></a>

<script>

    function getPosition(element){
        var e = document.getElementById(element);
        var left = 0;
        var top = 0;

        do{
            left += e.offsetLeft;
            top += e.offsetTop;
        }while(e = e.offsetParent);

        return [left, top];
    }

    function jumpTo(id){    
        window.scrollTo(getPosition(id));
    }

</script>

Answer 5

评论的代表不够。

如果锚点设置name但未设置id，则所选答案中基于getElementById（）的方法将不起作用（不推荐使用，但确实在野外发生）。

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

所选答案中基于location的方法也可以使用location.replace进行简化：

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

通过使用javascript锚定跳跃

5 个答案: