vue-router ページ遷移時にアニメーションスクロールをする
vue-routerでページ遷移するときにスクロールの位置をトップ（一番上）に移動させたいとき、公式サンプルにしたがって以下のように実装します。
const router = new VueRouter({
routes: [...],
scrollBehavior (to, from, savedPosition) {
return { x: 0, y: 0 }; // トップに移動
}
})JavaScript ページの先頭までアニメーションスクロールをするで紹介したように、スクロールをアニメーションで移動させたいときは別の方法で実装する必要があります。
routerの値をwatchして、変更されたタイミングでスクロールの処理を実行します。scrollToファンクションはJavaScript ページの先頭までアニメーションスクロールをするで紹介しています。
watch: {
'$route' (newValue, oldValue) {
scrollTo(0, 600); // トップに移動
}
}あまり綺麗な方法でないので他にもっといい方法があるかもしれませんが、これで違和感なくスクロールさせることができます。
うまく動かない場合
うまく動かない場合は以下のようにnextTickを使い、DOM更新後に処理を行うようにするとうまくいくかもしれません。
watch: {
'$route' (newValue, oldValue) {
this.$nextTick(() => {
scrollTo(0, 600); // トップに移動
}
}
}