jQueryより簡単！Vue.jsでスムーススクロールを導入してみた。

はじめに

この記事では、Vue.js内でライブラリを用いて簡単にスムーススクロールを導入する方法とともに、
いかにjQueryより簡単かをお伝えしたいと思います！

まずはjQueryで記述してみる

• jQueryの読み込み

```
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
```

• スムーススクロール処理（ページTOPに遷移するためのものとします）

```
$(function () {
    // #で始まるa要素をクリックした場合のイベント
    $('a[href^=#]').click(function () {
        // スクロールに追従するヘッダーがある場合はその高さ分を調整する（px）
        var header_adjust = 50;

        // スムーススクロールの速度（ミリ秒）
        var scroll_speed = 2000;

        // aタグのhref属性を取得する
        var anchor = $(this).attr("href");

        // 移動先を取得
        var moving_to = $(anchor == "#" || anchor == "" ? 'html' :anchor);

        // 移動先を調整
        var position =moving_to.offset().top + header_adjust;

        // スムーススクロール　swing（変速）
        $('body,html').animate({
            scrollTop: position
        }, scroll_speed, 'swing');

        return false;
    });
});
```

いかがでしょうか？！
上記ソースコードをコピペでも動くかと思いますが、
もし求める挙動ではなかった場合、調整やデバッグに手間がかかるかと思います。

Vue.jsで同じことを実現してみる

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

npmの場合
```
npm install --save vue-smooth-scroll
```
CDNの場合
```
<script src="https://cdn.jsdelivr.net/npm/vue-smooth-scroll@1.0.13/dist/vue-smooth-scroll.min.js"></script>
```

• app.js（大元のJSファイル）にimportを記述する

```
// インポート
import vueSmoothScroll from 'vue-smooth-scroll';

// グローバルにする（使用するコンポーネントでインポートする場合は不要）
Vue.directive('smooth-scroll',vueSmoothScroll);

// smooth-scrollコンポーネントを使用する
Vue.use(vueSmoothScroll);
```

• コンポーネント内でsmooth-scrollを記述する

```
<a href="#app" v-smooth-scroll="{ duration: 2000, offset: -50 }">
```
なんとこれだけです！
durationは何秒で移動するか、
offsetはここではヘッダーの高さ
を指定しています。

他にもオプションがありますので、
さらに詳しく知りたい方は公式をご覧ください。

補足

貴サイトの要件（ブラウザ種類とそのバージョン）によっては
CSSだけでスムーススクロールを実現できる場合がありますので
チェックしてみてください＾＾

最後に

Vue.jsに限らず、世に公開されているライブラリは便利で簡単なものが多いですね！

改めて要点を書くと、

1. 要件に合うライブラリを探す（ライブラリ前提で要件を決める）
2. （npm）インストールする
3. コンポーネントに適用する

これだけです。
スムーススクロール以外のVueライブラリの場合でも
この大きく３つの工程を守り、細かい部分はドキュメントを見ればすぐに導入できると思います😄

それではまた👋