vue实现点击回到顶部

<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>

 

转载于:https://www.cnblogs.com/zeishuai/p/10462661.html