javascript - 页面刷新后,使页面自动滚回到顶部
PHPz
PHPz 2017-04-11 13:16:32
[JavaScript讨论组]

比如有一个页面,滚动条在body上,当页面滚动到下方时,如何在刷新后使页面滚动回初始位置?
已尝试但是失效的方案:
$("body").scrollTop(0);
window.scrollTo(0,0);
document.body.scrollTop=0;

除了页面跳转,还有什么方法才能让页面刷新后复位到初始位置?

上一个示例代码




    
    刷新页面滚动条复位
    


    

000000====---- top -----====0000000

PHPz
PHPz

学习是最好的投资!

全部回复(7)
巴扎黑

LZ可以尝试下加个延时再滚动到顶部。比如:

setTimeout(() => window.scrollTo(0,0), 150)

亲测有效:https://clarencep.github.io/f...

大家讲道理

onload的时候检测document.body的 scrolltop。大于一个值你就归零咯。

高洛峰

浏览器不是自动这功能吗?

ringa_lee

监听刷新事件,onload之后再window.scrollTo(0,0);

巴扎黑

最上面设个空锚点,每次初始化滚到这个锚点。

大家讲道理

你需要找到出现滚动条的元素,再设置。
很多时候,布局会屏蔽body,或者html的滚动条。

比如

<body>
    <p class='warp'>
        <header></header>
        <main></main>
        <footer></footer>
    </p>
</body>

// css

body{ overflow: hidden }

.warp{ overflow-x:hidden;overflow-y: scroll }    

这种布局,我们设置了warp有滚动条,而body 没滚动条。 那么 重置滚动条,当然不能重置 body..

PHP中文网

如果你的页面内容是动态生成的话,刷新之后应该是自动就回到顶部的,如果是静态内容的话,可能就是还留在之前的位置。那就等页面加载完成之后再处理回滚到顶端。如果不行的话那就需要再次确认一下滚动条到底是在哪个容器下面了。

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号