意外と簡単！Vue.jsでスムーススクロールとトップへ戻るボタンを実装する方法

Masaki Oba
  • Instagramでフォローする
  • LinkedInでフォローする
  • ホーム
  • ブログ
  • Vue
  • 意外と簡単！Vue.jsでスムーススクロールとトップへ戻るボタンを実装する方法

目次

サンプルデモ

実装方法

vue-smooth-scrollのインストール

プロジェクトディレクトリにvue-smooth-scrollをインストール

  1. cd *** // プロジェクトのディレクトリに移動
  2. npm i -D vue-smooth-scroll

jsファイルにプラグインの使用を宣言

  1. import vueSmoothScroll from 'vue-smooth-scroll'
  2. Vue.use(vueSmoothScroll);

HTMLソースコード

ここまでの作業でスムーススクロールの実装ができます。
簡単ですね。

  1. <ul>
  2.   <li>
  3.     <a href="#section1" v-smooth-scroll>セクション1</a>
  4.   </li>
  5.   <li>
  6.     <a href="#section2" v-smooth-scroll>セクション2</a>
  7.   </li>
  8.   <li>
  9.     <a href="#section3" v-smooth-scroll>セクション3</a>
  10.   </li>
  11. </ul>
  12. <div id="section1">
  13.   <!-- セクション1のコンテンツ -->
  14. </div>
  15. <div id="section2">
  16.     <!-- セクション2のコンテンツ -->
  17. </div>
  18. <div id="section3">
  19.     <!-- セクション3のコンテンツ -->
  20. </div>

カスタムオプション

カスタムオプションを使うことで、スクロール位置やアニメーションスピードを調整することができます。
ヘッダーで position: fixed を使っている場合などに位置を簡単にずらすことができるので便利です。

  1. <ul>
  2.   <li>
  3.     <a href="#section1" v-smooth-scroll="{ duration: 1000, offset: -50 }">セクション1</a>
  4.   </li>
  5. </ul>
  6. <div id="section1">
  7.   <!-- セクション1のコンテンツ -->
  8. </div>

使い方は簡単で、v-smooth-scrollにdurationとoffsetのオプションを追加するだけです。
durationがアニメーションスピード、offsetがスクロール位置となっていて、offsetでは正・負どちらの数値も反映されます。
上記例では、指定したセクションコンテンツより50px上の位置で止まる設定となります。

スクロールイベントの実装

スクロール後にトップへ戻るボタンを表示させるため、カスタムスクロールディレクティブでスクロールイベントを実装します。
カスタムスクロールディレクティブとVueインスタンスのサンプルです。

  1. // 必ずVueインスタンス作成前に登録する
  2. Vue.directive('scroll', {
  3.   inserted: function (el, binding) {
  4.     let f = function (evt) {
  5.       if (binding.value(evt, el)) {
  6.         window.removeEventListener('scroll', f)
  7.       }
  8.     };
  9.     window.addEventListener('scroll', f)
  10.   }
  11. });
  12. // Vueインスタンス作成
  13. const app = new Vue({
  14.   el: '#app',
  15.   data: {
  16.     visible: false // 表示・非表示判定を格納
  17.   },
  18.   methods: {
  19.     handleScroll() {
  20.       // スクロール値が151以上の場合にvisibleをtrue、そうでない場合にfalseにする
  21.       this.visible = window.pageYOffset > 150;
  22.     }
  23.   }
  24. });

HTMLソースコード

  1. <body id="top">
  2.   <div v-scroll="handleScroll" :class="{visible: visible}">
  3.     <a href="#top" v-smooth-scroll>トップへ戻る</a>
  4.   </div>
  5. </body>

SNSでシェアする:

ブログカテゴリー

最新のブログ記事

ウェブに関することなら
お気軽にご相談ください

ご相談・お問い合わせ

ご相談内容についてお聞かせください。
お見積りのご依頼も対応いたします。

会社案内資料

会社案内のパンフレットを
ダウンロードできます。