问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

页面刷新后，使页面自动滚回到顶部

头像
userdhf
    872107598

    比如有一个页面，滚动条在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.onload=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>
    node.jshtml5csshtmljavascript
    阅读 25.3k
    10 个回答
    得票最新
    头像
    牧毅
      4.9k51117
      头像
      zkimyes
        1.1k1113

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

        头像
        august1107
          224

          楼主！我找到方法了~

               ` window.onbeforeunload = function(){
          //刷新后页面自动回到顶部
        document.documentElement.scrollTop = 0;  //ie下
        document.body.scrollTop = 0;  //非ie
 }`
          头像
          ssszwzr
            4545114184

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

            头像
            all2005
              3.4k41362495

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

              头像
              caoxiaoshuai
                1.1k156891

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

                头像
                舒克
                  1.5k1616

                  你需要找到出现滚动条的元素，再设置。
                  很多时候，布局会屏蔽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..

                  头像
                  tony
                    5
                    新手上路，请多包涵

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

                    头像
                    秋夕寒
                      43138

                      搞那么复杂干嘛，这就直接能实现

                      $(document).ready(function(){
    $(window).scrollTop(0)
})
                      头像
                      escplan
                        2
                        新手上路，请多包涵
                        window.onbeforeunload = function () {
  window.scrollTo(0, 0);
}
                        撰写回答
                        你尚未登录，登录后可以
                        • 和开发者交流问题的细节
                        • 关注并接收问题和回答的更新提醒
                        • 参与内容的编辑和改进，让解决方法与时俱进
                        推荐问题