Javascript window.location.hash = " "; 防止滚动到顶部？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4715073/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
window.location.hash = " "; prevent scrolling to the top?
提问by Francesco
in my website i set the url adress using
在我的网站中，我使用
window.location.hash = 'project_name';
but if i want to clean the adress url from any hashes (when i close a project) and i set
但是如果我想从任何哈希中清除地址 url（当我关闭一个项目时）并且我设置
window.location.hash = '';
it happens the page scrolls up to the top page
碰巧页面向上滚动到首页
there is any way to clean up the url without any side effect?
有什么方法可以清理网址而没有任何副作用？
thanks
谢谢
回答by Andy E
There's the onhashchangeevent, but it cannot be cancelled reliably across browsers to prevent scrolling. The best solution is to record the scroll position before changing the hash location and reset it afterwards. For example, the following code will catch a click on any link ― that doesn't stop propagation ― with a href value of #and prevent the page from scrolling vertically:
有onhashchange事件，但不能跨浏览器可靠地取消它以防止滚动。最好的解决方案是在更改哈希位置之前记录滚动位置并在之后重置它。例如，以下代码将捕获对任何链接的点击 - 不会停止传播 -#并阻止页面垂直滚动：
document.onclick = function (evt) {
var tgt = (evt && evt.target) || event.srcElement,
scr = document.body.scrollTop;
if (tgt.tagName == "A" && tgt.href.slice(-1) == "#") {
window.location.href = "#";
document.body.scrollTop = scr;
return false;
}
}
If you're changing the hash through script, you can use the following code:
如果您通过脚本更改哈希，则可以使用以下代码：
var scr = document.body.scrollTop;
window.location.href = '#';
document.body.scrollTop = scr;
Either of those methods can be adjusted to avoid scrolling individual elements or scrolling the page horizontally.?Note that you canremove the entire hash(including the #) without causing navigation or scrolling in modern browsers by calling the pushStateor replaceStatefunctions.
可以调整这两种方法中的任何一种，以避免滚动单个元素或水平滚动页面。请注意，您可以通过调用或函数删除整个哈希（包括#），而不会在现代浏览器中导致导航或滚动。pushStatereplaceState
回答by JustMaier
I was having the same problem and came here for an answer. Just found out there is a very easy way:
我遇到了同样的问题，来到这里寻求答案。刚刚发现有一个非常简单的方法：
window.location.hash = ' ';
Basically you are setting it to '# ', since the space doesn't exist, it doesn't move. When you revisit the page, it also doesn't treat it any differently than just #
基本上你将它设置为 '#'，因为空间不存在，它不会移动。当您重新访问该页面时，它也不会对它进行任何不同的处理，而只是 #
回答by SinSync
First off, thanks for your solutions - @Andy-E and @JustMaier.
首先，感谢您的解决方案 - @Andy-E 和 @JustMaier。
However, I had a problem getting it to work based on Andy E's second code block in Firefox and JustMaier's code in chrome.
但是，根据 Andy E 在 Firefox 中的第二个代码块和在 chrome 中的 JustMaier 代码，我在让它工作时遇到了问题。
So I did a mash up of those two code blocks and it works just as intended on both browsers
所以我混合了这两个代码块，它在两个浏览器上都按预期工作
var scr = document.body.scrollTop;
window.location.hash = ' ';
document.body.scrollTop = scr;
My two cents, taking nothing away from the real JS ninjas, mentioned above. : )
我的两分钱，没有从上面提到的真正的 JS 忍者身上拿走任何东西。:)
回答by valk
document.body.scrollTop is deprecated, also latest Chrome versions seem to be unstable here. The following should work:
document.body.scrollTop已弃用，最新的 Chrome 版本在这里似乎也不稳定。以下应该工作：
var topPos = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
window.location.href = '#';
document.documentElement.scrollTop = topPos;
