返回顶部

返回顶部

<template>
    <div>
        <!--返回顶部按钮-->
        <div style="position: fixed;bottom: 100px;right: 50px;">
            <i v-if="btnFlag" @click="backTop" class="back-wrap"></i>
        </div>
    </div>
</template>

<script>
export default {
    name: 'backTop',
    props:['minHeight'],
    data() {
        return {
            btnFlag: false,
            scrollTop:0
        }
    },
    // 组件创建监听scroll此方法
    mounted() {
        window.addEventListener('scroll', this.scrollToTop)
    },
    destroyed() {
        window.removeEventListener('scroll', this.scrollToTop)
    },
    methods: {
        backTop() {
            const _this = this
            var timer = setInterval(() => {
                var ispeed = Math.floor(-_this.scrollTop / 5)
                document.documentElement.scrollTop = document.body.scrollTop = _this.scrollTop + ispeed
                if (_this.scrollTop === 0) {
                    clearInterval(timer)
                }
            }, 16)
        },
        scrollToTop() {
            const _this = this
            var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
            _this.scrollTop = scrollTop
            //minHeight大于多少显示，小于多少隐藏
            if (_this.scrollTop > _this.minHeight) {
                _this.btnFlag = true
            } else {
                _this.btnFlag = false
            }
        }
    }
}
</script>

<style scoped>
.back-wrap {
    width: 0;
    height: 0;
    position: absolute;
    right: 10px;
    border: 20px solid #aaa;
    border-left-color: transparent;
    border-right-color: transparent;
    border-top: none;

}
</style>

使用组件

  <BackTop :minHeight="height"></BackTop>