今回は「vue-scrollto」ライブラリを使って、ページ内のリンク移動をスムーズに行えるようにしていきます。
Nuxt.jsでvue-scrolltoを使ってスムーズにスクロールさせる
vue-scrolltoとは?
冒頭にも記載したように、ページ内の要素にスムーズにスクロール(smooth scroll)できるようにしてくれるライブラリです。

DEMOページも丁寧に記述されていて、良いなと思いました!
vue-scrolltoを使ってみる
vue-scrolltoをインストール
$ npm i vue-scrollto
pluginsフォルダ配下にvue-scrollto.jsファイルを作成
複数箇所で、vue-scrollを使うことが考えられるので、pluginsフォルダ配下にvue-scrollto.js
ファイルを作成します。
オプション詳細については、リポジトリのREADME.mdに記載されています。
import Vue from 'vue'
import VueScrollTo from 'vue-scrollto'
Vue.use(VueScrollTo, {
duration: 700, // スクロールアニメーションの長さ(ミリ秒)
easing: [0, 0, 0.1, 1], // easingとはエフェクトの動きを加速/減速させるためのもの
offset: -100, // 遷移後の位置調整
})
nuxt.config.jsのpluginsとmodulesに追記
nuxt.config.js
ファイル内のpluginsとmodulesに下記を追記します。
module.exports = {
plugins: [
{ src: 'plugins/vue-scrollto.js' }
],
modules: [
'vue-scrollto/nuxt'
]
}
ページ内リンクを作成
nuxt-link to
の中にv-scroll-to
を入れて飛ばしたいidを指定してあげると、スムーズにスクロール(smooth scroll)させることができます。
index.vue
ファイル
<template>
<scroll-test></scroll-test>
</template>
<script>
import ScrollTest from "../components/ScrollTest.vue"
export default {
components: {
ScrollTest
}
}
</script>
ScrollTest.vue
ファイル
<template>
<div>
<p>
<nuxt-link v-scroll-to="'#scroll-test'" to>scroll-testに移動</nuxt-link>
</p>
<p id="scroll-test">
scroll-test
</p>
</div>
</template>
<style scoped>
#scroll-test {
margin-top: 3000px;
}
</style>

短いですが以上になります!
最後まで読んでいただきありがとうございました!
Nuxt.js関連のおすすめUdemy講座
Nuxt.js関連のおすすめ書籍
リンク
コメント