【Vue.js】ニュルっと登場するtopへ戻るボタン

学習後のアウトプットとして記述しています。
何か間違いがありましたら、ご指摘宜しくお願い致します。

開発環境

windows10
vscode
vue.js CDN

実装画像

スクロール前

スクロール後

実装

index.html

<button class="top_btn" v-show="buttonActive" @click="pageTop">
  <i class="fa-solid fa-angle-up"></i>
</button>

v-showとは
v-show="条件"とする事で条件の真偽によりその要素を表示するかしないかをコントロールできます。
今回は、v-showを使用して、初期値はボタンを非表示にしています。
@click="pageTop"を設定し、ボタンがクリックされた時の処理をVue.jsに記述していきます。
@click="pageTop"は、v-on:click="pageTop"と省略しない形で記述することも出来ます。
sthyle.css

.top_btn {
  position: fixed;
  buttom: 30px;
  right: 30px;
  width: 40px;
  heigth: 40px;
  margin: 0 auto;
  backbround: #e0ffff;
  border-radius: 50%;
  line-height: 40px;
 }

円の中はFontAwosameを使用して、ボタンを作成しています。
main.js

const app = new Vue ({
    el: '#app',
    data: {
        buttonActive: false,//ボタンを非表示にしておく
        scroll: 0
    },
    mounted() {
        window.addEventListener('scroll',this.scrollWindow)
    },
    methods: {
        pageTop() {
            window.scrollTo({
                top: 0,
                behavior: 'smooth'
            })
        },
        scrollWindow() {
            const top = 100 //topから100pxスクロールしたらボタン登場
            this.scroll = window.scrollY //垂直方向
            if (top <= this.scroll) {
                this.buttonActive = true
            } else {
                this.buttonActive = false
            }
        } 
    }
})

mounted() {
        window.addEventListener('scroll',this.scrollWindow)
    },

mountedはvue.jsの初期化の中の決められたタイミングで実行される関数です。
今回は、ページがスクロールされた時に処理が実行されます。

methods: {
        pageTop() {
            window.scrollTo({
                top: 0,
                behavior: 'smooth'
            })
        },

methods内では、ボタンをクリックしたときの処理を記述しています。
top: 0は初期値で、 behavior: 'smooth'は動きの種類（オプション）です。

scrollWindow() {
            const top = 100 //topから100pxスクロールしたらボタン登場
            this.scroll = window.scrollY //垂直方向
            if (top <= this.scroll) {
                this.buttonActive = true
            } else {
                this.buttonActive = false
            }
        } 

const top = 100 でtop100pxスクロールしたらボタンが登場するようにしています。
this.scroll = window.scrollYで垂直方向にスクロールするように設定しています。
if文を使用して、topから100px以上スクロールしたら、ボタンが表示(true)されてそうでなければ、ボタンは非表示(false)になります。

お疲れ様でした。