使用 javascript 进行锚点跳转

Posted 2023-02-19

【中文标题】使用 javascript 进行锚点跳转

【英文标题】：anchor jumping by using javascript

【发布时间】：2012-11-24 00:39:19

【问题描述】：

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

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

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

所以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;">

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

非常感谢。

【问题讨论】：

不确定，但您可以尝试在跳转后手动写入哈希属性。例如，在设置 window.location.hash='' 的 onclick 处理程序中设置超时。

您的意思是在跳转到同一网页的另一部分时，您不想在 URL 中显示 #？

在这种情况下，您将不得不操作窗口的 scrollTop，通常通过 window.scrollTo 或相应的 jQuery 助手：***.com/questions/6677035/jquery-scroll-to-element 或 ***.com/questions/500336/…

@Jeff - 如果你这样做 location.hash=''，# 仍然存在。

请不要那样做。将页面保存在书签中时，哈希值很好。

【参考方案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

_{（我撒谎了。一点也不复杂。）}

【讨论】：

老鼠！！链接已损坏 :-( 我以为 JS Fiddles 会永远留在那里

@Mawg 显然他们已经删除了在网址末尾添加 /show 的功能。

“即使 IE6 也支持这个”是我见过的最好的评论。

@Black 没有“jQuery”元素这样的东西。如果您想从查询中取出第一个元素，请执行$(mySelector)[0].scrollIntoView()。

1+ 代表scrollIntoView。 1- 最后提到它。

【参考方案2】：

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

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

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

【讨论】：

很少在 IE 上有效，这在所有 IE 上都有效；)

我最终得到了window.location = window.location.origin + window.location.pathname + '#hash';

这为我重新加载了页面。接受的答案最终起作用了，但我希望它更短。

【参考方案3】：

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

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

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

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

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

【参考方案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>

【讨论】：

我不认为添加哈希会使其成为一个新页面。

它不会重新加载页面。

你说得对，它不会重新加载页面。我在控制台中尝试使用 chrome 并重新加载图标。

在最新的 Firefox 中，哈希更改似乎会强制重新加载 iFrame（在 src 属性中）。我认为这是一个浏览器错误，但需要注意。

【参考方案5】：

我有一个提示按钮，点击它会打开显示对话框，然后我可以写下我想要搜索的内容，然后它会转到页面上的那个位置。它使用 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>

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

感谢***（可能还有stackexchange）的人不记得我是如何收集所有零碎的。 ☺