使用javascript进行锚点跳跃

IT技术 javascript html function anchor href
2021-01-16 05:22:07

我有一个经常会被发现的问题。问题是没有任何地方可以找到明确的解决方案。

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

主要目标应该是在使用锚点跳转到页面时获得一个干净的 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>

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

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

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

非常感谢。

5个回答

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

这是一种更懒惰的方法:

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

(好吧,我撒谎了。一点也不复杂。)

“即使 IE6 也支持这个”是我见过的最好的评论。
2021-03-15 05:22:07
@Black 没有“jQuery”元素这样的东西。如果要从查询中获取第一个元素,请执行$(mySelector)[0].scrollIntoView().
2021-03-18 05:22:07
老鼠!!链接已损坏:-( 我以为 JS Fiddles 永远留在那里
2021-04-06 05:22:07
1+ 为scrollIntoView1-最后提到它。
2021-04-06 05:22:07
@Mawg 显然他们已经删除了/show在 url 末尾使用 add 的能力
2021-04-10 05:22:07

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

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

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

这为我重新加载了页面。接受的答案最终有效,但我希望它更短。
2021-03-17 05:22:07
我结束了 window.location = window.location.origin + window.location.pathname + '#hash';
2021-04-02 05:22:07
什么很少在 IE 上有效,这对所有 IE 都有效;)
2021-04-13 05:22:07

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

getElementById()如果锚点已设置name但未id设置(不推荐,但确实会在野外发生),则所选答案中基于方法将不起作用

如果您无法控制文档标记(例如 webextension),请记住一些事情。

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

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

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

点击后将发送到锚点。为了使其多次工作,根据经验需要重新加载页面。

归功于stackoverflow(也可能是stackexchange)的人们不记得我是如何收集所有零碎的。

因为当你做

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>
我不认为添加哈希使它成为一个新页面。
2021-03-18 05:22:07
它不会重新加载页面。
2021-03-22 05:22:07
在最新的 Firefox 中,哈希更改似乎会强制重新加载 iFrame(在 src 属性中)。我认为这是一个浏览器错误,但需要注意一些事情。
2021-03-27 05:22:07
你说得对,它不会重新加载页面。我尝试在控制台中使用 chrome 并重新加载图标。
2021-04-02 05:22:07