Vueと共通

【Nuxt.js】Nuxt実践編:ページトップボタンをwindow.scrollToで実装する

前置き

ページのトップに戻るボタン、
これをpluginを使用せずに
window.scrollTo
実装していきます🍒

アニメーションも非常にシンプルで
コードも短いものを使っています🌟

そもそも1スクロールで
上まで戻れるなら
実装の必要もないので、
本当に必要かどうか
検討した上で行ってくださいね!

ちなみに以前使ったvue-scrolltoは
ページ内リンクで使用するのがお勧めです💫
【Nuxt.js】plugin実践編:vue-scrolltoでスムーズにスクロール

参考:
Vue.jsでトップへ戻るボタンを作る方法【window.scrollTo】
スクロールすると出てくる「トップへ戻る」ボタンの作り方
Vue(Nuxt.js)でTopへ戻るボタンを実装する方法【ライブラリ使用無し】


ぬるっと移動させる"smooth"

MDN: https://developer.mozilla.org/ja/docs/Web/API/Window/scrollTo

@clickgoTopメソッドを発火し
window.scrollToしています🙆‍♀️

window.scrollTo
遷移の場所を
数値で指定する必要があります。
ページ内リンクでも
1番上または1番下など
数値指定がしやすい位置の
使用がお勧めです💫☝️

他の場所で使用する場合は
座標を知りたい要素にoffsetして
consoleで表示を確かめながら
やると良いです🍎
【jQuery入門】offset()で要素の位置を取得・設定する方法!

background-image
svgを使用するやり方は
こちらを参考にしてください🙏
input type="file"のデザイン

(色の変数指定ができたら
 記事として出す予定です✍️)


スクロールしたらボタンを表示させる

スクロールして
Y軸をある程度うごかすと
ボタンが出現します。

この段階では
アニメーションをつけていないので
突然でてきます💥笑

mounted
まずはDOM操作ができる
mounted
スクロールイベントを検知し
comeButtonメソッドを発火させます。

⬇️mountedの解説記事はこちら
【Nuxt.js】Nuxt文法編:mounted

window.addEventListener('scroll')
スクロールイベントの検知です。
MDN: https://developer.mozilla.org/ja/docs/Web/API/Document#events

comeButton
console
スクロールでY軸の値が
変動することが分かります💡
MDN: https://developer.mozilla.org/ja/docs/Web/API/Window/scrollY

Y軸がtopの30を上回った時、
(30より下にスクロールした場合)
buttonActivetrueにし
v-showで表示させます。

⬇️なぜv-showなのか
 v-ifではダメなのか分からない🤔💭
 という方はこちらをご覧ください👀
【Nuxt.js】Nuxt文法編:v-show


ボタンにアニメーションをつける

アニメーションをつけます。
スクロールするというイベントが
きっかけにあるので
transitionを使用しています。

⬇️@keyframe animationとの違いや
 基本的なtransitionの使い方は
 こちらをご覧ください👀
【Nuxt.js】transition基礎編:ページ遷移アニメーション

2パターンあるので
お好みで❤️

ふわっと表示


下からぬるっと表示

分かりやすくするため
3秒とっています。


まとめ

個人的に
スクロールバーも
ボタンと合わせたデザインにしたら
面白いかもしれないなぁ〜🍒
と思いました🧸💭

そしてアニメーションについては
シンプルな動きなら
今回のようなコードで十分ですね💡

もちろんwatchなどを使用して
より細かい設定もできます!
【Nuxt.js】スクロールアニメーション実践編:思わず最後までスクロール

-Vueと共通
-,

© 2024 aLiz Nuxt