如果您转到页面a并滚动,然后刷新,页面将在您离开它的位置刷新。这很好,但是这也会发生在url中有锚点位置的页面上。一个例子是,如果你点击了一个链接http://example.com/post/244#comment5
,并在环顾四周后刷新了页面,你就不会站在锚点上,页面会跳来跳去。有没有办法用javascript来防止这种情况呢?所以不管你什么时候都会导航到锚点。
发布于 2011-08-12 12:46:03
由于浏览器行为的变化,不再推荐使用此解决方案。查看其他答案。
基本上,如果使用锚点,我们将绑定到windows scroll事件。其思想是第一滚动事件必须属于由浏览器完成的自动重新定位。当这种情况发生时,我们自己重新定位,然后删除绑定的事件。这可以防止后续的页面滚动借用系统。
$(document).ready(function() {
if (window.location.hash) {
//bind to scroll function
$(document).scroll( function() {
var hash = window.location.hash
var hashName = hash.substring(1, hash.length);
var element;
//if element has this id then scroll to it
if ($(hash).length != 0) {
element = $(hash);
}
//catch cases of links that use anchor name
else if ($('a[name="' + hashName + '"]').length != 0)
{
//just use the first one in case there are multiples
element = $('a[name="' + hashName + '"]:first');
}
//if we have a target then go to it
if (element != undefined) {
window.scrollTo(0, element.position().top);
}
//unbind the scroll event
$(document).unbind("scroll");
});
}
});
发布于 2013-09-05 18:30:34
在Chrome上,即使你强制scrollTop为0,它也会在第一次滚动事件后跳转。
您应该将滚动绑定到以下内容:
$(window).on('beforeunload', function() {
$(window).scrollTop(0);
});
因此,浏览器会被欺骗,以为它是在刷新之前的开始。
发布于 2017-10-13 12:42:10
要禁用自动滚动恢复,只需将此标记添加到head部分。
<script>history.scrollRestoration = "manual"</script>
IE不支持它。Browser compatibility.
https://stackoverflow.com/questions/7035331
复制相似问题