サイト

【Nuxt.js】plugin実践編:vue-scrolltoでスムーズにスクロール

前置き

今回はvue-scrollto
ページ内リンク(アンカーリンク)で
スクロールしながら指定場所に飛べます🧚‍♀️💫
【公式】
https://www.npmjs.com/package/vue-scrollto

比較: vue-scrollto未使用

味気ない🌀
nuxt-linkを使うと1回しか機能しない
a hrefでやれば解決するけど…
どうせならnuxt-link使いたいじゃない!

) pages

比較: vue-scrollto使用

スクロールバーに着目👀
スルスルっとスクロール🍒
通常と違い、何回でもとべますね。
コードはstep順に記載していきます✍️

使い方(グローバルver)

step1: インストール

terminal

$ npm i vue-scrollto

step2: /pluginsにjsファイルを追加

directory

pages/
--| index.vue

plugins/
--| vue-scrollto.js

nuxt.config.js

【vue-scrollto.js】
・Nuxt.jsでpluginを使用時の書き方
https://ja.nuxtjs.org/api/configuration-plugins/

・オプションは公式の
 Options項目で確認できます。

 duration: スクロール継続時間
 easing: 速度の緩急
 offset: 遷移後の位置調整
      少しだけ上に設定すると⭕️

easingに関してはここが参考になります!
https://note.com/ritar/n/n5e8ed0e07917

) file

step3: nuxt.config.jsのpluginsに記載

) file

vue-scrollto.jsに記載したoptionsは
modulesに記載することもできます。
vue-scrollto公式のNuxt.js項目で確認できます。

ただvue-scrollto.jsに書いた方が
まとまって分かりやすいと思います💡

step4: テンプレートでページ内リンクを作成

・nuxt-link toの中にv-scroll-toを入れる
 toが2個あって変な感じがしますが
 どちらも必要なので削らないように✏️
・リンク先を''で囲む

) pages

vue-scrollto公式の
Usage項目で確認できます。

これで完成です🤗🎉

使い方(ローカルver)

vue-scrollto.jsをまるごとコピペで⭕️
オプションもdata内に書けば適応されます。

) pages

-サイト
-, ,

© 2024 aLiz Nuxt