【Nuxt.js】plugin実践編:vue-scrolltoでスムーズにスクロール
🎈 この記事はWPへ移行しました
【Nuxt.js】plugin実践編:vue-scrolltoでスムーズにスクロール
# vue-scrolltoとは
ページ内リンク(アンカーリンク)で
スクロールしながら指定場所に飛びます🧚♀️💫
【公式】
https://www.npmjs.com/package/vue-scrollto
# 比較: vue-scrollto未使用
味気ない🌀
nuxt-linkを使うと1回しか機能しない
a hrefでやれば解決するけど…
どうせならnuxt-link使いたいじゃない
【index.vue】
<template>
<div class="page">
<nuxt-link to="#anchor">
下に飛ぶ
</nuxt-link>
<div id="anchor">
とべた!
</div>
</div>
</template>
# 比較: vue-scrollto使用
スクロールバーに着目👀
スルスルっとスクロール🍒
通常と違い、何回でもとべますね。
コードはstep順に記載していきます✍️
# step1: インストール
【ターミナル】
$ npm i vue-scrollto
【ファイル構成】
pages/
--| sample.vue
plugins/
--| vue-scrollto.js
nuxt.config.js
# step2: /pluginsに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
import Vue from 'vue'
import VueScrollTo from 'vue-scrollto'
Vue.use(VueScrollTo, {
duration: 700,
easing: [0, 0, 0.1, 1],
offset: -100,
})
# step3: nuxt.config.jsのpluginsに記載
【nuxt.config.js】
plugins: [
'~plugins/vue-scrollto'
],
vue-scrollto.jsに記載したoptionsは
modulesに記載することもできます。
vue-scrollto公式のNuxt.js項目で確認できます。
ただvue-scrollto.jsに書いた方が
まとまって分かりやすいと思います💡
modules: [
['vue-scrollto/nuxt', { duration: 700 }],
],
# step4: テンプレートでページ内リンクを作成
【sample.vue】
・nuxt-link toの中にv-scroll-toを入れる
toが2個あって変な感じがしますが
どちらも必要なので削らないように✏️
・リンク先を''で囲む
<template>
<div class="page">
<nuxt-link
v-scroll-to="'#anchor'"
to
>
下にとぶ
</nuxt-link>
<div id="anchor">
とべた!
</div>
</div>
</template>
vue-scrollto公式の
Usage項目で確認できます。
<a href="#" v-scroll-to="'#element'">Scroll to #element</a>
<div id="element">
Hi. I'm #element.
</div>
これで完成です🤗🎉
# ローカルver
一応ローカルの書き方も。
vue-scrollto.jsをまるごとコピペで⭕️
オプションもdata内に書けば適応されます。
<template>
<div class="page">
<nuxt-link
v-scroll-to="'#anchor'"
to
>
下にとぶ
</nuxt-link>
<div id="anchor">
とべた!
</div>
</div>
</template>
<script>
import Vue from 'vue'
import VueScrollTo from 'vue-scrollto'
Vue.use(VueScrollTo, {
duration: 700,
easing: [0, 0, 0.1, 1],
offset: -100,
})
export default {
data () {
return {
options: {
el: '#anchor',
onDone: (el) => console.log(el)
}
}
}
}
</script>
<style lang="scss" scoped>
#anchor {
margin-top: 1000px;
}
</style>
今まで週3で投稿していましたが
来週から月水の2回に変更致します💡
自社サービスに手をつけているためです。
お楽しみに🌟
落ち着いたらまた週3になるかも?
ということで
次の公開予定日は1/20(月)。
内容はfirebaseです〜!!
このアカウントでは
Nuxt.js、Vue.jsを誰でも分かるよう、
超簡単に解説しています🎈😀
これからも発信していくので、
ぜひフォローしてください♪
🎈 この記事はWPへ移行しました
【Nuxt.js】plugin実践編:vue-scrolltoでスムーズにスクロール
この記事が気に入ったらサポートをしてみませんか?