vue 頁面切換滾動+錨點

情況一：

導航欄 有導航 跳到某個頁面的某個位置

方法一：

通過refs定位 修改 document.documentElement.scrollTop和document.body.scrollTop的值

var download = this.$refs["download"]
var total = download.offsetTop
document.documentElement.scrollTop=total
document.body.scrollTop=total

　　

方法二進階：

在router.js 文件里

let router = new Router({
router,
scrollBehavior(to,from,savedPosition){
    if(to.query.anchor){//路由跳轉要傳需要定的錨點的id 例如；this.$router.push("index?anchor=download")
        return {
            selector:"#"+to.query.anchor
        }
    }
}
})

這樣就不用每個有錨點的頁面都需要寫上面的方法一代碼。

但是這個有個下面這個問題：

當頁面已經跳轉過錨點，將頁面滾動到導航欄再次點擊錨點導航，頁面不會自動滾動到錨點的地方。因為不會觸發路由。

現在的解決辦法就是：

就是添加點擊事件的判斷，如果路由已經是含有要跳轉的錨點 ，就執行方法一的，如果沒有，就路由跳轉。

click(){
  if(this.$router.query.anchor=="download"){
   方法一      
}  else{
  this.$router.push('index?anchor=download')
}
}

 

但是這個有個下面這個問題：

頁面跳轉到相應錨點，點擊返回按鈕，返回到上一個頁面，頁面會現在之前點擊進入的地方然后閃一下到頂端。

之前有試過以下代碼沒有效果

let router = new Router({
router,
scrollBehavior(to,from,savedPosition){
    return {
            x:0,y:0
        }
}
})

 

 

然后用這個方法解決了：

在router.js

router.beforeEach((to,from,next)=>{
    document.documentElement.scrollTop=0
    document.body.scrollTop=0
    next()
})