Vue.jsでページ内リンクのスムーススクロールをvue-smooth-scrollで実装する方法と、 このプラグインと合わせて、スクロールイベントで表示するトップへ戻るボタンの実装方法を紹介します。

サンプルデモ

See the Pen WaLmqj by Masaki Oba (@Cleysense) on CodePen.

実装方法

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

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

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

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

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

HTMLソースコード

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

<ul>
  <li>
    <a href="#section1" v-smooth-scroll>セクション1</a>
  </li>
  <li>
    <a href="#section2" v-smooth-scroll>セクション2</a>
  </li>
  <li>
    <a href="#section3" v-smooth-scroll>セクション3</a>
  </li>
</ul>

<div id="section1">
  <!-- セクション1のコンテンツ -->
</div>
<div id="section2">
    <!-- セクション2のコンテンツ -->
</div>
<div id="section3">
    <!-- セクション3のコンテンツ -->
</div>

カスタムオプション

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

<ul>
  <li>
    <a href="#section1" v-smooth-scroll="{ duration: 1000, offset: -50 }">セクション1</a>
  </li>
</ul>

<div id="section1">
  <!-- セクション1のコンテンツ -->
</div>

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

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

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

// 必ずVueインスタンス作成前に登録する
Vue.directive('scroll', {
  inserted: function (el, binding) {
    let f = function (evt) {
      if (binding.value(evt, el)) {
        window.removeEventListener('scroll', f)
      }
    };
    window.addEventListener('scroll', f)
  }
});

// Vueインスタンス作成
const app = new Vue({
  el: '#app',
  data: {
    visible: false // 表示・非表示判定を格納
  },
  methods: {
    handleScroll() {
      // スクロール値が151以上の場合にvisibleをtrue、そうでない場合にfalseにする
      this.visible = window.pageYOffset > 150;
    }
  }
});

HTMLソースコード

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

SNSでシェアする:

大場 正樹 (Masaki Oba)

Web制作会社に3年ほど勤務し、2014年1月にフリーランスとして「Cleysense」を立ち上げ、Webデザイン・DTPデザイン・フロントエンド・バックエンド・ディレクション・コンサルティングなど、幅広く活動中。