SPAでも戻るボタンで元のスクロール位置に戻りたい（vue）

Tweet

Category JavaScript / Tagged vue 2023/07/10

問題

vue、vue routerで作っているSPAのページ移動で、ブラウザの戻るボタンを押したとき、前の位置に戻りたいです。

どうも上に戻ってしまうようです。

答え

vue routerで画面遷移時のスクロール位置をコントロールするには scrollBehavior を使う。

上に戻したい

意図的に上に戻さないと、位置はページの途中のまま画面が切り替わる状況があります。

通常は上に戻ってよいと思うので、以下のようにします。

const router = createRouter({
  scrollBehavior(to, from, savedPosition) {
    return { top: 0 }
  },
})

前のスクロール位置に戻したい

一覧ページのようなページに戻るときは、静的ページのように、前の位置に戻るのが直感的かもしれません。

前の位置に戻るには、以下のようにします。

const router = createRouter({
  scrollBehavior(to, from, savedPosition) {
    if (savedPosition) {
      return savedPosition
    } else {
      return { top: 0 }
    }
  },
})

時間差で前のスクロール位置に戻したい（若干無理やり）

上の方法でもうまくいかないことがあります。

検索結果などを画面表示後に非同期で取得している場合などでは、画面表示直後では元の位置に戻ろうにも戻れず、期待している位置に戻らない。

手抜きして、0.5秒後にスクロール位置を移動する方法。

const router = createRouter({
  scrollBehavior: function(to, form, savedPosition){
    if (savedPosition) {
      return new Promise((resolve, reject) => {
        setTimeout(() => {
          resolve(savedPosition)
        }, 500)
      })
    } else {
      return {x:0, y:0}
    }
  }
})

ページ遷移直後に savedPosition を保存しておいて、検索結果取得後にスクロール位置を移動するようにするほうが、動きは違和感がないかもしれません。