<template>
    <div class="center">
        <div class="btnTop"  v-if="btnFlag"  @click="backTop()">回頂部</div>
    </div>
</template>

<script>
    import Vuex from "vuex";
    export default {
        data(){
            return{
                btnFlag:
 
false
            }
        },
    
          // vue的兩個生命鉤子，這裏不多解釋。
         // window對象，所有瀏覽器都支持window對象。它表示瀏覽器窗口，監聽滾動事件
        mounted() {
            window.addEventListener(‘scroll‘, this.scrollToTop)
        },
        destroyed() {
            window.removeEventListener(‘scroll‘, this.scrollToTop)
        },

        methods: {
            
 
// 點擊圖片回到頂部方法，加計時器是為了過渡順滑
            backTop() {
                let that = this
                let timer = setInterval(() => {
                    let ispeed = Math.floor(-that.scrollTop / 5)
                    document.documentElement.scrollTop = document.body.scrollTop = that.scrollTop + ispeed
                    
 
if(that.scrollTop === 0) {
                        clearInterval(timer)
                    }
                }, 16)
            },

            // 為了計算距離頂部的高度，當高度大於200顯示回頂部圖標，小於200則隱藏
            scrollToTop() {
                let that = this
                let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
                that.scrollTop = scrollTop
                if(that.scrollTop >200) {
                    that.btnFlag = true
                } else {
                    that.btnFlag = false
                }
            }
        }

    }
</script>

vue實現點擊回到頂部