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

醉挽清风
  • 655

问题描述

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

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

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

回复
阅读 4k
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
  • 4
新手上路,请多包涵

我遇到的问题是,在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 的浏览器中可用。
官网-滚动行为

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏