通过使用javascript跳锚


129

我有一个很常见的问题。问题在于找不到任何明确的解决方案。

关于锚,我有两个问题。

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

会像以前一样。它将哈希添加到URL。我还加了

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

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

非常感谢。


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

您是说不想跳到同一网页的另一部分时在URL中显示#吗?
罗杰伍

2
在这种情况下,你将不得不处理窗口的scrollTop的,通常由window.scrollTo或相应的jQuery的帮助:stackoverflow.com/questions/6677035/jquery-scroll-to-elementstackoverflow.com/questions/500336/...
弗兰克van Puffelen 2012年

@Jeff-如果这样做location.hash=''#遗骸在那里。
德里克·朕会功夫2012年

请不要那样做。将页面保存在书签中时,哈希值很好。
Marco Sulla,2015年

Answers:


204

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

这是一种比较懒惰的方法:

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

(好吧,我撒谎。这并不复杂。)


1
老鼠!链接已断开:-(我以为JS Fiddles永远呆在那里
Mawg说恢复Monica 2015年

1
@Mawg显然,他们已经删除了/show在URL末尾使用add的功能。
德里克·朕会功夫2015年

11
“即使IE6也支持此功能”是我见过的最好的评论。
2015年

3
@Black没有“ jQuery”元素之类的东西。如果要从查询中获取第一个元素,请执行$(mySelector)[0].scrollIntoView()
德里克·朕会功夫,

4
1+ scrollIntoView。1-最后提到它。
Yay295 '19

12

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

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

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


很少在IE上起作用,而对所有IE都起作用;)
Adam111p 2016年

5
我最终以 window.location = window.location.origin + window.location.pathname + '#hash';
亚历

这为我重新加载了页面。接受的答案最终奏效了,不过,我希望它的长度要短一些。
HoldOffHunger

3

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

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

如果您无法控制文档标记(例如,webextension),则需要注意的地方。

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

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

1

因为当你做

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>

3
我认为添加哈希值不会使其成为新的页面。
德里克·朕会功夫2012年

5
它不会重新加载页面。
德里克·朕会功夫2012年

没错,它不会重新加载页面。我在带有chrome的控制台中尝试,然后重新加载了网站图标。
乔纳森·武科维奇-特里布哈雷特2012年

在最新的Firefox中,哈希更改似乎迫使iFrame重新加载(在src属性中)。我认为这是一个浏览器错误,但需要注意。
Beejor

1

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

我使用Google Chrome。

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

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

点击后将发送给锚。为了使其能够多次工作,从经验上需要重新加载页面。

感谢stackoverflow(可能还有stackexchange)的人,我不记得我是如何收集所有零碎的东西的。☺

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.