从 url 中删除 #Hash 而不刷新。
Posted
技术标签:
【中文标题】从 url 中删除 #Hash 而不刷新。【英文标题】：Remove #Hash from url without refreshing. 【发布时间】：2019-06-02 11:20:02 【问题描述】：我知道 Stackoveflow 上有很多关于这个主题的问题，但我不明白。
所以我的问题是我如何在按下链接后删除网址中的#hash（不刷新）。
Here 是一种解决方案，但我不明白我应该把所有东西放在哪里
我的代码是：
<a class="nav-link" href="#home">Home</a>
而#home 是我要滚动到的 div 的 id。
【问题讨论】：
您好 Gnusson，欢迎来到 SO，您可以发布您迄今为止尝试过的代码吗？我很乐意帮助您解决问题。 嗨，乔希，我没有尝试任何代码）：我不明白我应该把上面示例中的所有代码放在哪里。谢谢你的帮助：D 如果您要导航到该文档中的某个部分，您需要保留它。为什么要删除它？ 我觉得它看起来很难看，我知道可以删除所以这就是原因。 这不是删除它的好理由。 【参考方案1】：如果您希望哈希链接正常运行，但只是希望从外观上删除哈希，则此代码可能适合您：
<!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 偏移量的新事件。这有点棘手。如果您正在寻找该答案，请告诉我。
【讨论】：
History.replaceState() 是这里的通用要点。【参考方案2】：
最简单的方法是将哈希替换为空。
location.hash = "";
但如果这样做，“example.com#asdf”会变成“example.com#”
不那么可读的方式，也删除了“#”，将新状态推送到历史记录。
history.pushState("", document.title, window.location.pathname);
这会在历史记录中添加一个新条目，但不包含哈希。
【讨论】：
【参考方案3】：如果您使用的是 jquery，那么您可以将其写入脚本文件中
$(document).ready(function()
$('.nav-link').click(function(e) e.preventDefault(); )
)
【讨论】：
当我按下链接时，我仍然在 url 中有一个#course 你能再试一次吗？我不小心在选择器中添加了空格以上是关于从 url 中删除 #Hash 而不刷新。的主要内容，如果未能解决你的问题，请参考以下文章