vue 项目在移动端路由跳转时,页面不是在顶部

问题描述

我使用的是vue mint-ui,但是在路由跳转的时候总是不能到顶部

问题出现的环境背景及自己尝试过哪些方法

我试了网上的多种方式:
1、在 main.js 添加 router.afterEach 中 window.scrollTo(0,0);
2、在 router.afterEach 中添加 document.body.scrollTop = 0;
document.documentElement.scrollTop = 0;
3、router.js 中添加

   scrollBehavior(to, from, savedPosition) {
    if (savedPosition) {
      return savedPosition
    } else {
      console.log(111)
      return {
        x: 0,
        y: 0
      }
    }
  }

相关代码

1、router.js

   scrollBehavior(to, from, savedPosition) {
    if (savedPosition) {
      return savedPosition
    } else {
      console.log(111)
      return {
        x: 0,
        y: 0
      }
    }
  }

2、main.js

router.afterEach((to, from, next) => {
  document.documentElement.scrollTop = document.body.scrollTop = 0;
  window.scrollTo(0, 0);
})

你期待的结果是什么?实际看到的错误信息又是什么?

在电脑上测试的时候是没有问题,但是在手机上测试就出问题,新页面无法跳到顶部

阅读 1.6k
评论
    4 个回答

    我也遇到了这个问题,因为我隐藏滚动条时设置了body{hight:100%}之后移动端的document.documentElement.scrollTop,document.body.scrollTop就一直为0,获取不到,因为要用的检测滚动条显示回到顶部按钮就把 #app{height:100%}也设置了,然后监控的this.$el.scrollTop。我也用了楼主的方法尝试进入页面时是在顶部。scrollBehavior确实返回了(0,0)。但并没生效可能内部用的也是document.documentElement.scrollTop,document.body.scrollTop这些。
    然后我就用router.afterEach((to, from, next),然后将#app的scrollTop=0,就可以了。
    var vm = new Vue({
    router,
    store,
    render: h => h(App)
    }).$mount("#app");

    router.afterEach((to, from) => {
    vm.$el.scrollTop = 0;
    });
    要写在vm实例下面。本人小白很多地方也没弄明白

    评论 赞赏

      请知道的大神帮忙啊,困扰了好久

      评论 赞赏
        ayanamirei0
        • 1
        • 新人请关照

        我遇到的问题是,在ios里h5页面,跳转二级页面,返回以后会出现白屏。然后html, body {  
          width: 100%;  
          height: 100%;  
          margin: 0;  
          padding: 0;  
          position: relative;  
        }  

        app {  

          width: 100%;  
          height: 100%;  
          background: #fff;  
          overflow: scroll;  
          -webkit-overflow-scrolling: touch;  
          position: absolute;  
          left:0;  
          top:0;  
        }  用这个解决的。但是解决了白屏问题,又出现这个进入二级页面以后,页面不在顶部的问题

        评论 赞赏

          注意: scrollBehavior 这个功能只在支持 history.pushState 的浏览器中可用。
          官网-滚动行为

          评论 赞赏
            撰写回答

            登录后参与交流、获取后续更新提醒