比如有一个页面，滚动条在body上，当页面滚动到下方时，如何在刷新后使页面滚动回初始位置？
已尝试但是失效的方案：
$(“body”).scrollTop(0);
window.scrollTo(0,0);
document.body.scrollTop=0;
除了页面跳转，还有什么方法才能让页面刷新后复位到初始位置？
上一个示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>刷新页面滚动条复位</title>
<style>
*{margin: 0;padding:0;}
html,body{height: 100%;}
.box{
width: 50px;
height: 3000px;
margin: 0 auto;
background-color: red;
}
</style>
</head>
<body>
<p>000000====---- top -----====0000000</p>
<div class="box"></div>
<script>
window.οnlοad=function(){
if(document.body.scrollTop>0){
console.log(1);
window.scrollTo(0,-1);
document.body.scrollTop=0;
}
window.scrollTo(0,-1);
document.body.scrollTop=0;
}
</script>
</body>
</html>
LZ可以尝试下加个延时再滚动到顶部。比如:
setTimeout(() => window.scrollTo(0,0), 150)
亲测有效：https://clarencep.github.io/f…
onload的时候检测document.body的 scrolltop。大于一个值你就归零咯。
浏览器不是自动这功能吗?
监听刷新事件，onload之后再window.scrollTo(0,0);
最上面设个空锚点，每次初始化滚到这个锚点。
你需要找到出现滚动条的元素，再设置。
很多时候，布局会屏蔽body，或者html的滚动条。
比如
<body>
<div class='warp'>
<header></header>
<main></main>
<footer></footer>
</div>
</body>
// css
body{ overflow: hidden }
.warp{ overflow-x:hidden;overflow-y: scroll }
这种布局，我们设置了warp有滚动条，而body 没滚动条。 那么 重置滚动条，当然不能重置 body..
如果你的页面内容是动态生成的话，刷新之后应该是自动就回到顶部的，如果是静态内容的话，可能就是还留在之前的位置。那就等页面加载完成之后再处理回滚到顶端。如果不行的话那就需要再次确认一下滚动条到底是在哪个容器下面了。
扫一扫
852
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
