裴大头-秦可爱

裴大头-秦可爱

vue中页面跳转滚动条置顶(总结)

发表于 2021-03-17
裴大头
阅读量 291
更新于 2021-05-25

1.vue单个页面跳转时:

在此页面上mounted方法中设置滚动条的方法

mounted() {
    // 切换页面时滚动条自动滚动到顶部
    window.scrollTo(0,0);
}
js

2.全部页面,使用路由的钩子函数中设置(在router中main.js)

router.afterEach((to,from,next) => {
  window.scrollTo(0,0);
  // chrome
    document.body.scrollTop = 0
    // firefox
    document.documentElement.scrollTop = 0
    // safari
    window.pageYOffset = 0
});
//或
router.beforeEach((to, from, next) => {    
    // chrome
    document.body.scrollTop = 0
    // firefox
    document.documentElement.scrollTop = 0
    // safari
    window.pageYOffset = 0
    next()
})
js

3.全部页面,使用路由vue-router自带的滚动条行为解决(router中的index.js文件中)

//页面跳转显示在顶部
  scrollBehavior (to, from, savedPosition) {
    if (savedPosition) {
      return savedPosition
    } else {
      return { x: 0, y: 0 }
    }
  }
js
推荐文章
  • JavaScript 的事件循环机制

    1点赞1评论

  • Vue项目代码规范

    1点赞1评论

  • Java 23种设计模式——单例模式(Singleton)

    0点赞1评论

  • 聊一聊我的文本编辑器

    1点赞11评论

  • Element UI 级联选择器 el-cascader 实现懒加载和搜索功能

    1点赞0评论

Crafted with by Pei你看雪

小破站居然运行了 931 天访客 25416

© 2023 Pei你看雪鲁ICP备19037910号-2