前置き
ページのトップに戻るボタン、
これを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
@clickでgoTopメソッドを発火しwindow.scrollToしています🙆♀️
window.scrollToは
遷移の場所を
数値で指定する必要があります。
ページ内リンクでも
1番上または1番下など
数値指定がしやすい位置の
使用がお勧めです💫☝️
他の場所で使用する場合は
座標を知りたい要素にoffsetしてconsoleで表示を確かめながら
やると良いです🍎
【jQuery入門】offset()で要素の位置を取得・設定する方法！
background-imageにsvgを使用するやり方は
こちらを参考にしてください🙏
input type="file"のデザイン
（色の変数指定ができたら
記事として出す予定です✍️）
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 |
<template> <div class="page"> <div class="top"> TOP </div> <div class="bottom" @click="goTop" > BOTTOM </div> <button class="button" @click="top" /> </div> </template> <script> export default { data () { return { } }, methods: { goTop () { window.scrollTo ({ top: 0, behavior: "smooth" }) }, }, } </script> <style lang="scss" scoped> .page { font-size: 32px; > .bottom { margin-top: 1000px; } > .button { position: fixed; bottom: 30px; right: 30px; width: 50px; height: 50px; background-color: pink; border-radius: 50%; background-image: url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="%23ffffff" d="M0 16.67l2.829 2.83 9.175-9.339 9.167 9.339 2.829-2.83-11.996-12.17z"/></svg>'); background-repeat: no-repeat; background-size: 20px; background-position: center; } } </style> |
スクロールしたらボタンを表示させる
スクロールして
Y軸をある程度うごかすと
ボタンが出現します。
この段階では
アニメーションをつけていないので
突然でてきます💥笑
mounted
まずはDOM操作ができるmountedで
スクロールイベントを検知しcomeButtonメソッドを発火させます。
⬇️mountedの解説記事はこちら
【Nuxt.js】Nuxt文法編：mounted
window.addEventListener('scroll')が
スクロールイベントの検知です。
MDN: https://developer.mozilla.org/ja/docs/Web/API/Document#events
comeButtonconsoleで
スクロールでY軸の値が
変動することが分かります💡
MDN: https://developer.mozilla.org/ja/docs/Web/API/Window/scrollY
Y軸がtopの30を上回った時、
（30より下にスクロールした場合）buttonActiveをtrueにしv-showで表示させます。
⬇️なぜv-showなのか
v-ifではダメなのか分からない🤔💭
という方はこちらをご覧ください👀
【Nuxt.js】Nuxt文法編：v-show
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 |
<template> <div class="page"> <div class="top"> TOP </div> <div class="bottom" @click="top" > BOTTOM </div> <button v-show="buttonActive" class="button" @click="top" /> </div> </template> <script> export default { mounted() { window.addEventListener('scroll', this.comeButton) }, data () { return { buttonActive: false, scroll: 0, } }, methods: { top () { window.scrollTo ({ top: 0, behavior: "smooth" }) }, comeButton () { console.log(`Y軸${window.scrollY}`) const top = 30 this.scroll = window.scrollY if (top <= this.scroll) { this.buttonActive = true } else { this.buttonActive = false } }, }, } </script> <style lang="scss" scoped> .page { font-size: 32px; > .bottom { margin-top: 1000px; } > .button { position: fixed; bottom: 30px; right: 30px; width: 50px; height: 50px; background-color: pink; border-radius: 50%; background-image: url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="%23ffffff" d="M0 16.67l2.829 2.83 9.175-9.339 9.167 9.339 2.829-2.83-11.996-12.17z"/></svg>'); background-repeat: no-repeat; background-size: 20px; background-position: center; } } </style> |
ボタンにアニメーションをつける
アニメーションをつけます。
スクロールするというイベントが
きっかけにあるのでtransitionを使用しています。
⬇️@keyframe animationとの違いや
基本的なtransitionの使い方は
こちらをご覧ください👀
【Nuxt.js】transition基礎編：ページ遷移アニメーション
2パターンあるので
お好みで❤️
ふわっと表示
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 |
<template> <div class="page"> <div class="top"> TOP </div> <div class="bottom" @click="top" > BOTTOM </div> <transition name="button"> <button v-show="buttonActive" class="button" @click="top" /> </transition> </div> </template> <script> export default { mounted() { window.addEventListener('scroll', this.comeButton) }, data () { return { buttonActive: false, scroll: 0, } }, methods: { top () { window.scrollTo ({ top: 0, behavior: "smooth" }) }, comeButton () { console.log(`Y軸${window.scrollY}`) const top = 30 this.scroll = window.scrollY if (top <= this.scroll) { this.buttonActive = true } else { this.buttonActive = false } }, }, } </script> <style lang="scss" scoped> .page { font-size: 32px; > .bottom { margin-top: 1000px; } > .button { position: fixed; bottom: 30px; right: 30px; width: 50px; height: 50px; background-color: pink; border-radius: 50%; background-image: url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="%23ffffff" d="M0 16.67l2.829 2.83 9.175-9.339 9.167 9.339 2.829-2.83-11.996-12.17z"/></svg>'); background-repeat: no-repeat; background-size: 20px; background-position: center; &.button-enter-active, &.button-leave-active { transition: opacity 0.5s; } &.button-enter, &.button-leave-to { opacity: 0; } } } </style> |
下からぬるっと表示
分かりやすくするため
3秒とっています。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 |
<template> <div class="page"> <div class="top"> TOP </div> <div class="bottom" @click="top" > BOTTOM </div> <transition name="button"> <button v-show="buttonActive" class="button" @click="top" /> </transition> </div> </template> <script> export default { mounted() { window.addEventListener('scroll', this.comeButton) }, data () { return { buttonActive: false, scroll: 0, } }, methods: { top () { window.scrollTo ({ top: 0, behavior: "smooth" }) }, comeButton () { console.log(`Y軸${window.scrollY}`) const top = 30 this.scroll = window.scrollY if (top <= this.scroll) { this.buttonActive = true } else { this.buttonActive = false } }, }, } </script> <style lang="scss" scoped> .page { font-size: 32px; > .bottom { margin-top: 1000px; } > .button { position: fixed; bottom: 30px; right: 30px; width: 50px; height: 50px; background-color: pink; border-radius: 50%; background-image: url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="%23ffffff" d="M0 16.67l2.829 2.83 9.175-9.339 9.167 9.339 2.829-2.83-11.996-12.17z"/></svg>'); background-repeat: no-repeat; background-size: 20px; background-position: center; &.button-enter-active, &.button-leave-active { transition: bottom 3s; } &.button-enter, &.button-leave-to { bottom: -50px; } } } </style> |
まとめ
個人的に
スクロールバーも
ボタンと合わせたデザインにしたら
面白いかもしれないなぁ〜🍒
と思いました🧸💭
そしてアニメーションについては
シンプルな動きなら
今回のようなコードで十分ですね💡
もちろんwatchなどを使用して
より細かい設定もできます！
【Nuxt.js】スクロールアニメーション実践編：思わず最後までスクロール