結論
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>
