頁面切換，默認顯示頂部是一個在移動端很常見的功能。整理了三個現實方法如下：

方法一：在路由配置中使用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>