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

Question

问题描述

我使用的是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);
})

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

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

Answer 1

我也遇到了这个问题，因为我隐藏滚动条时设置了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实例下面。本人小白很多地方也没弄明白

Answer 2

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

Answer 3

我遇到的问题是，在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;  
}  用这个解决的。但是解决了白屏问题，又出现这个进入二级页面以后，页面不在顶部的问题

Answer 4

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