• Vue.js

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属性で指定した値とアンカーリンク先のＩD名をパラメータとして追加します。

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

まとめ

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

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