Vue-router中scrollBehavior滚动到顶部

作者: Yuhoo | 来源:发表于2018-09-10 11:41 被阅读0次

Vue-router中scrollBehavior滚动到顶部
router(守卫：跳转之前router.beforeEach;
vue 不默认滚动条位置
vue-router跳转滚动的问题(scrollBehavior
vue下返回顶部功能实现
滚动条索引（scrollIntoView）
Weex scroll滑动改变顶部div位置
vue 监听滚动事件实现固定在顶部或者元素显示与否
运动锚点js
杀手级的JS代码（一）

写在前面
在Vue项目中，当我们在A页面滚动到中间位置，然后跳转到B，在从B进入到A页面时，本应该回到A页面顶部，但是由于使用keep-alive组件缓存页面，A页面会滚动道上次位置。为解决这个问题，我们需要使用vue-router中的scrollBehavior。

const router = new VueRouter({
  routes: [...],
  scrollBehavior (to, from, savedPosition) {
    // return 期望滚动到哪个的位置
  }
});

scrollBehavior 方法接收 to 和 from 路由对象。第三个参数 savedPosition 当且仅当 popstate 导航 (通过浏览器的前进/后退按钮触发) 时才可用。

对于所有路由导航，简单地让页面滚动到顶部

scrollBehavior (to, from, savedPosition) {
  return { x: 0, y: 0 };
}

Vue-router中scrollBehavior滚动到顶部
写在前面在Vue项目中，当我们在A页面滚动到中间位置，然后跳转到B，在从B进入到A页面时，本应该回到A页面顶部，...
router(守卫：跳转之前router.beforeEach;
作用：跳转前进行判断拦截。 vue中使用vue-router切换页面时滚动条自动滚动到顶部的方法
vue 不默认滚动条位置
scrollBehavior: () => ({ // 滚动条滚动的行为，不加这个默认就会记忆原来滚动条的位置 ...
vue-router跳转滚动的问题(scrollBehavior
使用前端路由，当切换到新路由时，想要页面滚到顶部，或者是保持原先的滚动位置，就像重新加载页面那样。这个功能只在支持...
vue下返回顶部功能实现
vue下返回顶部功能实现 Vue中点击按钮回到顶部（滚动效果） vue中回到顶部 vue滚动到一定位置显示置顶元素...
滚动条索引（scrollIntoView）
可以用在：列表的索引，歌词的滚动可以将滚动条的某元素定位到某地方（顶部，中部，底部）顶部 scrollInto...
Weex scroll滑动改变顶部div位置
滚动试图顶部，有需要的固定内容，往上滚动，隐藏顶部div内容代码
vue 监听滚动事件实现固定在顶部或者元素显示与否
需求：当页面滚动到距离顶部175px的时候，页面导航栏固定在顶部 1. 监听滚动事件在mounted钩子中给wi...
运动锚点js
滚动到顶部滚动到指定位置
杀手级的JS代码（一）
滚动到顶部滚动到底部生成随机颜色检测黑暗模式复制到剪贴板数组乱序