利用javascript实现锚点跳转

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

关于锚，我有两个问题

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

并使用以下命令调用该函数：

<a onclick="jumpto('one');">One</a>

1

什么会像以前一样。它将把散列添加到url。我还补充说

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

没有成功。因此，如果有人能告诉我如何解决这个问题，我将非常感激

非常感谢。

因为当你这么做的时候

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>

函数getPosition（元素）{
var e=document.getElementById（元素）；
左向量=0；
var-top=0；
做{
左+=东偏左；
top+=e.offsetTop；
}而（e=e.offsetParent）；
返回[左，上]；
}
函数跳转到（id）{
scrollTo（getPosition（id））；
}

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

下面是一个更懒惰的方法：

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.
}

这用于操纵url。如果您也需要，则必须执行以下操作：

演示：
另一个带过渡：

您还可以使用：

---

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

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

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

---

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

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

在.html文件中，我有：

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

当我将test100写入提示符时，它将转到我在html文件中放置span id=“test100”的位置

我使用谷歌浏览器

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

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

单击将发送到锚。要使其多次工作，根据经验需要重新加载页面

---

要归功于stackoverflow（也可能是stackexchange）的员工，他们不记得我是如何收集所有零碎的东西的。☺

没有足够的代表发表评论

如果锚具有

name

但未设置

id

（不推荐，但在野外确实会发生），则所选答案中基于

getElementById（）

的方法将不起作用

如果您无法控制文档标记，则需要牢记的内容（例如webextension）

所选答案中基于

位置的方法也可以简化为
位置。替换
：

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

对此不确定，但可以尝试在跳转后手动写入哈希属性。例如，在onclick处理程序中设置超时，该处理程序设置
窗口.位置.哈希=''
。您的意思是当跳转到同一网页的另一部分时，您不想在URL中显示#吗？在这种情况下，您必须操作窗口的滚动顶部，通常通过
窗口。滚动到
或相应的jQuery助手：或@Jeff-如果您执行
位置。hash='
，则
#
仍保留在那里。请不要这样做。将页面保存到书签中时，哈希很好。我认为添加哈希不会使其成为新页面。它不会重新加载页面。你说得对，它不会重新加载页面。我用chrome在控制台中进行了尝试，favicon被重新加载。在最新的Firefox中，哈希更改似乎强制重新加载iFrame（在src属性中）。我认为这是一个浏览器错误，但要注意的东西。老鼠！链接已断开：-（我以为JS Fiddles还在那里forever@Mawg显然，他们已经取消了在url末尾使用add
/show
的功能。“即使IE6也支持这一点”是我见过的最好的评论。@Black没有“jQuery”这样的东西元素。如果要从查询中取出第一个元素，请执行
$（mySelector）[0]。scrollIntoView（）
.1+用于
scrollIntoView
.1-最后一次提到它。在IE上很少起作用的是，这在所有IE上都起作用；）我最后得到了
window.location=window.location.origin+window.location.pathname+'#hash'这为我重新加载了页面。尽管如此，我还是希望答案能简短一些。
<button onclick="myFunction()">Load Prompt</button>
<span id="test100"><h4>Hello</h4></span>

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;
// }
        }
    }
}

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

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