143

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

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

主要目标应该是在使用锚点跳转页面时获得一个没有任何散列的漂亮干净的 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;">

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

非常感谢。

4

5 回答 5

234

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

这是一种更懒惰的方法：

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

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

于 2012-12-06T02:53:03.773 回答
17

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

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

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

于 2016-01-13T12:06:25.640 回答
5

Not enough rep for a comment.

The getElementById() based method in the selected answer won't work if the anchor has name but not id set (which is not recommended, but does happen in the wild).

Something to bare in mind if you don't have control of the document markup (e.g. webextension).

The location based method in the selected answer can also be simplified with location.replace:

function jump(hash) { location.replace("#" + hash) }
于 2018-06-10T15:13:23.093 回答
2

因为当你这样做时

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>
于 2012-12-06T02:42:51.567 回答
2

我有一个提示按钮，点击它会打开显示对话框，然后我可以写下我想要搜索的内容，然后它会转到页面上的那个位置。它使用 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写入提示时，它将转到我在 html 文件中放置 span id="test100" 的位置。

我使用谷歌浏览器。

注意：这个想法来自于在同一页面上使用链接

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

单击时将发送到锚点。为了让它多次工作，根据经验需要重新加载页面。

Credit to the people at stackoverflow (and possibly stackexchange, too) can't remember how I gathered all the bits and pieces. ☺</p>

于 2017-06-24T02:34:37.130 回答