页面切换，默认显示顶部是一个在移动端很常见的功能。整理了三个现实方法如下：

方法一：在路由配置中使用scrollBehavior

使用前端路由，当切换到新路由时，想要页面滚到顶部，或者是保持原先的滚动位置，就像重新加载页面那样。

vue-router 能做到，而且更好，它让你可以自定义路由切换时页面如何滚动。

在路由配置中使用scrollBehavior

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

如下例子， 使得每次进入页面都在页面顶部。

import Vue from 'vue'import Router from 'vue-router'import {wechatAuth,wechatOauth} from '@/utils/auth.js'import store from '@/store'Vue.use(Router)
const routes={
 mode: 'hash',
 routes: [
 { path: '/', redirect: '/introduce' },
 {
 path: '/introduce',
 name:'introduce',
 component: ()=> import('@/pages/introduce')
 },
 {
 path: '/register',
 component: ()=> import('@/pages/register')
 }, /* {
 path: '/auth',
 component: ()=> import('@/pages/auth')
 }, */
 {
 path: '/businessCard',
 component: ()=> import('@/pages/businessCard')
 },
 {
 path: '/category',
 component: ()=> import('@/pages/category')
 },
 {
 path: '/index',
 name:'index',
 component: ()=> import('@/pages/index')
 },
 {
 path: '/orderList',
 name:'orderList',
 component: ()=> import('@/pages/orderList')
 },
 {
 path: '/orderDetail',
 name:'orderDetail',
 component: ()=> import('@/pages/orderDetail')
 },
 {
 path: '/acceptOrder',
 name:'acceptOrder',
 component: ()=> import('@/pages/acceptOrder')
 },
 {
 path: '/feedBackDetail',
 name:'feedBackDetail',
 component: ()=> import('@/pages/feedBackDetail')
 },
 ], scrollBehavior (to, from, savedPosition) { if (savedPosition) {
 return savedPosition
 } else {
 return { x: 0, y: 0 }
 }
 }}
const route=new Router(
 routes
)
route.beforeEach((to, from, next)=> { //获取当前页面链接进入路由签名
 let link=route.resolve({
 path: window.location.href
 }) //判断有没有code
 if(link.href.includes('/?code')){
 let {code}=link.route.query
 let uri=to.fullPath
 wechatOauth(code,uri)
 }else{ //没有code再进入判断有没有用户资料
 if(store.state.userInfo.userId===null){ //用户数据初始化请求
 store.dispatch('getUserData').then(res=> { //这里是已授权
 //已授权进入正常的判断跳转流程
 //获取用户id及绑定手机号码
 let {userId,regTel}=res if(userId==-1){ //判断用户是否关注了公众号
 next('/introduce')
 }else{ //判断有没有绑定手机号码
 if(regTel==''){
 next('/register')
 }else{ //这里是请求到用户资料进入的正常流程 next()
 }
 }
 }).catch(err=> { //这里是未授权
 //未授权就请求微信接口进行授权 wechatAuth(to.fullPath)
 })
 }else{ //这里是没有问题进入的正常流程 next()
 }
 }
})
export default route

方法二：vue里面写法如下，至于updated生命周期里面

 updated() {
 window.scroll(0, 0);
 }

方法三：router拦截控制

现按钮点击快速回到页面顶部，有多种方法。

在这里我介绍一下jQuery的方法。

jQuery核心代码：

$(".top").click(function() {

$("body,html").animate({

scrollTop: 0

}

回顶部：

1. <div id="top"></div><a herf="#top">top</a>

2. <button class="gotop">top</button>$(".gotop").click(function(){$(document).scrollTop(0);})

3. <div id="top"></div><button class="gotop">top</button>

   var top=document.getElementById('top');

var btn=document.getElementsByClassName('btn')[0];

btn.onclick=function(){

top.scrollIntoView(0)

}

4.<button class="gotop">top</button>

var btn=document.getElementsByClassName('btn')[0];

btn.onclick=function(){

document.body.scrollTop=document.documentElement.scrollTop=0;

}

返回上一页的html写法：

1. <a href="#" onClick="javascript :history.back(-1);">返回上一页</a>

2. <a href="#" onClick="javascript :history.go(-1);">返回上一页</a>