動かざることバグの如し

近づきたいよ 君の理想に

Vue.jsでページ内リンクを使うなら「vue-scrollto」を使え

結論

Vue.jsでページ内リンク(いわゆるアンカーリンク)を使いたいならvue-scrolltoを使ったほうが幸せになれる

そもそもアンカーリンクって何

アンカーリンク自体死語な気がするが、いわゆるページ内リンク

リンクをクリックすることで同じページ上の任意の場所へジャンプしてくれる機能がある。そのリンクがアンカーリンクってやつ

仕様的には「http://example.com#hoge」とやると

<div id="#hoge">
コンテンツ
</div>

までジャンプしてくれる

vue-scrolltoを使うメリット

もちろんアンカーリンク貼るだけならvue-scrolltoなくてもなんとかなるが、

  • スムーススクロールを簡単に設定できる(アニメーションを意識しなくて良い
  • offsetで任意のDOMの○px上/下へズラしてジャンプできる(offset機能
  • コールバックが実装できる

等がある。

インストール

普通にnpmインストールするだけ

npm install --save vue-scrollto
or
yarn add vue-scrollto

サンプル

一番シンプルな例

durationオプションを渡すことでゆっくりスクロールしたり、素早くスクロールできたりできる。

以下がoffset機能

コールバックの例

ちなみにオプションだが、

<button v-scroll-to="{ el: '#element', offset: 200 }">

のように個別に渡すこともできるし、以下のようにグローバルに設定することもできる

Vue.use(VueScrollTo, {
     offset: 200,
 })

他にもいくつかオプションがある。公式ドキュメントもまとまって見やすいので好感が持てる

書いてて思ったが、一番伝わるのは「ページの一番上に戻る」ボタンの実装といえば早い気がした。当然それもvue-scrolltoで実装できる

環境

  • Vue.js 2

Nuxt.jsで使うときの注意点

Nuxt.jsにも対応しており、nuxt-linkで移動できる

ただし、nuxt-linkは仕様上toのattributeが必須なので以下のように「#」を指定する必要がある。

<nuxt-link v-scroll-to="{ el: 'top'}" to="#">一番上に戻る</nuxt-link>