vue 返回滚动条顶部组件_vue 路由切换回到顶部功能

前言

vue 项目陆续上线了几个，也暴露了不少问题。今天记录的是如何在路由切换的时候，滚动条回到顶部。

分析

首先简单分析下，为什么路由切换会导致滚动条不会自动到顶部。多页应用每次点击菜单导航都会重新刷新整个页面，自然有滚动条时，也会回到顶部。而单页应用不同，每次点击菜单导航都会触发对应的路由局部更新，这样就可能出现了滚动条就无法回到顶部(内容高度不够也不会有滚条)。

路由 hash 模式滚动条回到顶部

路由是通过 hash 方式，没有太好的办法，目前我想到的办法简单粗暴，就是在路由改变的时候去让可能存在滚动条的内容强制回到顶部。

一般是路由改变对应的内容切换的区域会出现滚动条，我们给会出现滚动条的区域设置一个class 样式为scroll-content:

也有可能存在双滚动条，即页面结构是左右结构，左侧的菜单高度没有进行设置，会导致body 存在滚动条，路由改变对应的内容区域也会出现滚动条。这一般是你要优化的，这样页面毕竟不好看。

方案1：

我们在 vue 项目的入口文件的路由改变中做处理

watch:{

$route(to, from) {

let scrollContent = document.querySelector('.scroll-content');

if (scrollContent){

scrollContent.scrollTop = 0;

scrollContent.scrollLeft = 0;

}

}

}

方案