Written by Kasumi

Vue.jsでスムーススクロールを実装する方法【vue-scrolltoライブラリを使おう】

Vue.jsでページ内リンク(アンカーリンク)を滑らかにスクロールさせるスムーススクロール機能を実装したい。

本記事ではこのよう悩みを解決。

vue-scrolltoライブラリを使って、スムーススクロール機能を実装する方法について解説します。

Vue.jsの導入方法についてはこちら

実装サンプル

See the Pen
Untitled
by Kohei (@kouk05)
on CodePen.0

実装サンプルです。

aタグの【クリック!】をタップすると、アンカーの場所までスムーススクロールします。

実装手順は以下の通りです。

vue-scrolltoライブラリを読み込む

まず最初にvue-scrolltoライブラリを実装環境に読み込みます。

CDNで実装する場合

<script src=”https://cdn.jsdelivr.net/npm/vue-scrollto”></script>

npmで実装する場合

npm install –save vue-scrollto

上記、どちらかの方法で読み込んでください。

HTML

<div id="app">
  <!-- v-scroll-to属性を設定 -->
  <a href="#anchor" v-scroll-to="anchor">クリック!</a>
  <!-- アンカーを設定 -->
  <section id="anchor" class="section03">アンカー</section>
</div>

次にHTMLを用意します。

クリック要素にv-scroll-to属性を付与し、任意の値を指定します。

アンカーリンク先にIDを指定します。

Vue.js

const app = Vue.createApp({
  data() {
    return {
      //  v-scroll-to属性の値とアンカーリンク先IDを指定
      anchor: "#anchor"
    };
  },
});
// vue-scrolltoを実行
app.use(VueScrollTo);
app.mount("#app");

Vue.jsでスムーススクロールを実装するコード例です。

useメソッドを使ってvue-scrolltoライブラリの使用を実行します。

データメソッドにv-scroll-to属性で指定した値アンカーリンク先のID名をパラメータとして追加します。

以上でスムーススクロールが実行されます。

まとめ

Vue.jsでスムーススクロールを実装する方法について紹介しました。

以上で解説を終わります。

関連記事

Vue.js

Vue.jsで指定回数、html要素をループ処理させる方法【v-forディレクティブを使おう】

2022.09.13
97
Vue.js

Vue.jsで開閉するドロップダウンリストを実装する方法

2022.09.02
102
Vue.js

Vue.jsでタブ切り替えを実装する方法【簡単】

2022.09.03
134
Vue.js

Vue.jsでクリックしたら表示・非表示するイベントを実装する方法

2022.08.26
182