目次

・smooth-scrollについて
・vue-scrolltoを使います
・pluginsに記載
・ページ内リンクを作成
・最後に

smooth-scrollについて

ページ内リンクを実装したときに「パッと」切り替わるのではなく、スクロールしながら特定の場所まで移動する機能です。
cssでは

html{
  scroll-behavior: smooth;
}

とやれば、ページ内リンクがsmooth scrollになりますが、対応してないブラウザやosがまだまだあるのでこれを使用するのはあまり現実的ではないですねー。
その場合、実装する場合はjsを記述したりなどの対応が必要になりますが、vueでは不要ですー。

vue-scrolltoを使います

smooth-scrollを実装するにあたって、vue-scrolltoを使用しますー。
まずはインストールしましょう。

yarn add vue-scrollto

インストールができたら、あとはpluginsにjs/tsファイルを追加しましょう

plugins/vue-scrollto.ts

import Vue from 'vue'
import VueScrollTo from 'vue-scrollto'

Vue.use(VueScrollTo, {
  duration: 700,
  easing: [0, 0, 0.1, 1],
})

optionはいろいろあるので公式ドキュメント参考に。
https://vue-scrollto.netlify.app/docs/#options

今回は
・duration
・easing
を使用してます

durationはスクロールアニメーションの継続時間
easingは速度の緩急

今回はしようしなかったですが、offsetも便利そうですね。
offsetは遷移後の位置調整なので、要素の少し上にしたりしたらちょうど良かったりするかもですね。

pluginsに記載

インストールが完了しvue-scrollto.tsファイルも作成したらあとは読み込みましょう。

nuxt.config.ts

  plugins: [
    { src: '~/plugins/vue-scrollto.ts' },
  ],

読み込み場所はnuxt.configのpluginsに読み込めばokです！

ページ内リンクを作成

読み込みまで完了したらあとはvueファイルでページ内リンクを作成すればokです。

公式ドキュメントにもありますが、

<a href="#" v-scroll-to="'#element'">Scroll to #element</a>

<div id="element">
    Hi. I'm #element.
</div>

とすれば、smooth scrollが完了しますー。
もしアンカーリンクなどをdataで持たせてる場合などは

<a href="#" v-scroll-to="element1">Scroll to #element</a>
<a href="#" v-scroll-to="element2">Scroll to #element</a>

<p id="element1">Hi. I'm #element.</p>
<p id="element2">Hi. I'm #element.</p>

export default {
  data() {
    return {
      element1: '#element1',
      element2: '#element2',
    }
  }
}

とすればokです

最後に

vue-scrolltoを使用したsmooth scrollの実装になります。
思ったりよも簡単ですし、個別でjsを記述したりする必要もないので楽ですね！

それではみなさん、良いvue lifeを〜〜〜