时间戳

首页 > 解决方案 > 删除页面 URL 中的哈希并阻止页面滚动到锚哈希

javascript - 删除页面 URL 中的哈希并阻止页面滚动到锚哈希

问题描述

我有两个页面，index.html 和 result.html。在 index.html 上，我在导航中有一些锚点，当它们被单击时，它们会向我的页面 Url 添加一个哈希，并将 Url 更改为此，例如：

https://example.com/index.html?SessionGuid=0edc696e-6f58-4d54-92c9-3753f5db57ae#someAnchor

在此页面中，有一个带有提交按钮的表单，当单击提交按钮时，表单值将被发送到 result.html。这会创建跳转到页面中间而不是显示页面顶部。

这就是我的 result.html 页面 Url 的样子：

https://example.com/result.html?SessionGuid=0edc696e-6f58-4d54-92c9-3753f5db57ae#someAnchor

因此，我使用此方法删除了我的 result.html 上的哈希：

history.replaceState('', document.title, window.location.origin + window.location.pathname + window.location.search);

这在 Chrome 中完美运行，哈希被删除并且页面保持在顶部。但在 FireFox 中，散列被删除，但页面仍在滚动到散列位置。

在这种行为方面，FF 和 Chrome 有什么区别？是否有解决此问题的跨浏览器解决方案？是脚本所在的位置吗？我对 jQuery 或纯 JS 持开放态度。也可以在 index.html 中的表单到达顶峰之前打开以删除散列。无论哪个是跨浏览器兼容的。

标签： javascriptjquery

解决方案

推荐阅读