Vuetify3(Vue3)で指定したIDの箇所までスクロールする

・検証環境

Windows11 wsl2 Vuetify3.1.12 vue-scrollto2.20.0 VisualStudioCode

Github

https://github.com/TKano-Null/test-site2

---

概要

ボタン押下時、指定したIDの要素までスクロールするものを作成しました。

Vuetifyの準備

yarn create vuetify

✔ Project name: … test-site2
✔ Which preset would you like to install? › Essentials (Vuetify, VueRouter, Pinia)
✔ Use TypeScript? … No / Yes
✔ Would you like to install dependencies with yarn, npm, or pnpm? › yarn

cd test-site2

前回同様TypeScript無し

vue-scrolltoの追加

今回はvue-scrolltoというプラグインを使用しました。

https://github.com/rigor789/vue-scrollto

yarn add vue-scrollto
yarn install

/src/main.jsの変更

import VueScrollTo from "vue-scrollto";
app.use(VueScrollTo);

https://github.com/TKano-Null/test-site2/blob/feafc967cc4cbdd74f6406509835755ff31f0689/src/main.js#L16

vueファイルで使用できるように予めimportしておきます。

/src/views/Home.vueの変更

      <v-btn href="#" v-scroll-to="'#test'">
        Scrolle Button
      </v-btn>

https://github.com/TKano-Null/test-site2/blob/8d0715a48fbc6ef81e6e95d1b1b80c1ecf48a0ce/src/views/Home.vue#L4

今回は[v-btn]に直接スクロール先を指定しました。

[v-scroll-to=”#遷移先ID名”]で使用できるようになっています。

[a]タグでも同じ要領で指定できるようです。

                <div id="test" style="text-align: center; height: 1000px">
                  <h1>scroll here</h1>
                </div>

https://github.com/TKano-Null/test-site2/blob/8d0715a48fbc6ef81e6e95d1b1b80c1ecf48a0ce/src/views/Home.vue#L18

遷移先として[test]IDをdivで指定しました。

vue-scrolltoを使用することでHTMLでのページ内リンク（ジャンプ）と同じように簡潔に書くことができました。

---

つまづいた点

yarn addでプラグインを追加後yarn installを実行しないとエラーになる

yarn add実行後、yarn devでサイトを確認しようとしても実行時エラーとなりました。

main.jsの変更

vue-scrolltoのドキュメントでは[require]を使用していたが、[import]を書く必要がありました。

結果的には数行の問題でしたが、Vuetifyを使用していることやVue3ということもあり情報が少なかった。

しかし、vue-scrolltoを使用することで複雑なScriptを書く必要がなく直感的で簡潔に実現することができました。

現在のプラグインのバージョンではVue3.xでも使用できるようです。

[app.use(VueScrollTo)]の第二引数にオプションを追加することでスクロール速度などを指定できる。