Question

我知道在Stackoveflow上有很多与此主题有关的问题，但我不理解。

所以我的问题是我按下链接后如何删除URL中的#hash（不刷新）。

Here是一种解决方案，但我不知道该将所有内容放在哪里

我的代码是：

<a class="nav-link" href="#home">Home</a>

#home是我要滚动到的div的ID。

Answer 1

如果您使用的是jquery，则可以将其写入脚本文件中

$(document).ready(function(){
  $('.nav-link').click(function(e){ e.preventDefault(); })
})

Answer 2

如果您希望哈希链接正常运行，但只希望将哈希值整洁地删除，则此代码可能对您合适：

<!DOCTYPE html>
<html>

<a class="nav-link" href="#home" onClick="removehash()">Home</a>

<div style="height:3000px"></div>

<h1 id="home">HOME</h1>

<script>
    function removehash(){
        setTimeout(function(){
            history.replaceState("", document.title, window.location.pathname);
        }, 1);
    }
</script>

但是更正确的方法可能是附加一个控制页面y偏移的新事件。有点棘手。让我知道您是否正在寻找该答案。

Answer 3

最简单的方法是什么都不用替换哈希。

location.hash = "";

但是如果这样做，“ example.com＃asdf”将变成“ example.com＃”

不易读懂的方法（也删除了“＃”）是将新状态推向历史记录。

history.pushState("", document.title, window.location.pathname);

这会将新条目添加到历史记录中，而不包含哈希。

从网址中删除#Hash而不刷新。

3 个答案: