elementUI之模拟goTop组件

    最近项目遇到一个问题，需要在个别出现较高垂直滚动条的页面，加入一个返回顶部的小功能。虽然利用许多Jquery插件可以实现，但是elementUI的官网本身就有一个goTop组件（奈何该组件没有开放），效果还不错，为了页面风格的一致性，准备对该组件进行了简单模拟，恰好CSDN已有一位前辈对此进行了封装（vue+element-ui 回到顶部组件），而且封装的相对完善，在此对其根据个人需求进行二次封装并添加演示demo。

1.官网goTop组件效果图 VS 实际模拟组件效果图

2.javascript & stylesheet

kt-scroll-top.js

---

var html = `
    
        

            
        
    
`;

Vue.component('kt-scroll-top', {
    template: html,
    data() {
        return {
            toTopShow: false,
            scrollTop: 0
        }
    },
    props: {
        bodyScroll: {
            type: Boolean,
            default: true
        }
    },
    methods: {
        handleScroll() {
            this.scrollTop = this.bodyScroll ? window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop : this.$refs['scrollTopWrapper'].parentNode.scrollTop;
            this.toTopShow = this.scrollTop > 300;
        },
        scrollToTop() {
            let timer = null, _this = this, dom = this.$refs['scrollTopWrapper'].parentNode;
            cancelAnimationFrame(timer);
            timer = requestAnimationFrame(function fn() {
                if (_this.scrollTop > 5000) {
                    _this.scrollTop -= 1000;
                    if (_this.bodyScroll) {
                        document.body.scrollTop = document.documentElement.scrollTop = _this.scrollTop;
                    } else {
                        dom.scrollTop = _this.scrollTop;
                    }
                    timer = requestAnimationFrame(fn);
                } else if (_this.scrollTop > 1000 && _this.scrollTop <= 5000) {
                    _this.scrollTop -= 500;
                    if (_this.bodyScroll) {
                        document.body.scrollTop = document.documentElement.scrollTop = _this.scrollTop;
                    } else {
                        dom.scrollTop = _this.scrollTop;
                    }
                    timer = requestAnimationFrame(fn);
                } else if (_this.scrollTop > 200 && _this.scrollTop <= 1000) {
                    _this.scrollTop -= 100;
                    if (_this.bodyScroll) {
                        document.body.scrollTop = document.documentElement.scrollTop = _this.scrollTop;
                    } else {
                        dom.scrollTop = _this.scrollTop;
                    }
                    timer = requestAnimationFrame(fn);
                } else if (_this.scrollTop > 50 && _this.scrollTop <= 200) {
                    _this.scrollTop -= 10;
                    if (_this.bodyScroll) {
                        document.body.scrollTop = document.documentElement.scrollTop = _this.scrollTop;
                    } else {
                        dom.scrollTop = _this.scrollTop;
                    }
                    timer = requestAnimationFrame(fn);
                } else if (_this.scrollTop > 0 && _this.scrollTop <= 50) {
                    _this.scrollTop -= 5;
                    if (_this.bodyScroll) {
                        document.body.scrollTop = document.documentElement.scrollTop = _this.scrollTop;
                    } else {
                        dom.scrollTop = _this.scrollTop;
                    }
                    timer = requestAnimationFrame(fn);
                } else {
                    cancelAnimationFrame(timer);
                    _this.toTopShow = false;
                }
            });
        }
    },
    mounted() {
        this.$nextTick(function () {
            window.addEventListener('scroll', this.handleScroll, true);
        });
    },
    destroyed() {
        window.addEventListener('scroll', this.handleScroll, true);
    }
});

kt-scroll-top.css

---

.kt-scroll-top {
    background-color: #fff;
    position: fixed;
    right: 100px;
    bottom: 150px;
    width: 40px;
    height: 40px;
    size: 40px;
    border-radius: 20px;
    cursor: pointer;
    transition: .3s;
    box-shadow: 0 0 6px rgba(0,0,0,.12);
    z-index: 5;
}

.kt-scroll-top .el-icon-caret-top {
    color: #409eff;
    display: block;
    line-height: 40px;
    text-align: center;
    font-size: 18px;
}

.kt-scroll-top:hover {
    opacity: 1;
}

3.演示html

kt-scroll-top-demo.html

    
    
    
    
    
    
    
    
    
    
    
    
    
    



    

        

            
滑动右侧滚动条出现scrollTop图标!
            


















            


















            


















            
            
        
        
        
    

PS：完整demo以图包方式存放，右键(演示demo的gif动图 ) -> 图片另存为(xxx.gif) -> 右键重命名(xxx.rar) -> 右键解压即可。