置顶按钮的封装

今天闲来无事，用原生JS封装了一个置顶的插件，遇到滑动速度的动画效果还是挺有趣的，

使用需设置ID为upward

 

window.onload = function () {
    backBtn({
        width: 600
    })
}


function backBtn(options) {
    var obj = {
        isBack: true,    //是否开启返回顶部
        scrollTop: 100,   //滚动条高度多少出现
        position: "right",//相对内容区域位置
        width: 500,     //内容区域宽度
        offset: 0,       //相对内容区域偏移距离
        speed: 400,      //滚动速度
        ifShow: true,   //默认是否显示
        bottom: 100      //相对屏幕下方偏移距离
    }//默认值
    var ops = Object.assign(obj, options)

    var $dom = document.querySelector('#upward');
    var $win = window

    var opr = {
        //相对于右边屏幕的距离
        getLeft: function () {
            var l
            var ww = $win.innerWidth;
            var dw = $dom.offsetWidth;
            if (ops.position == "left") {
                l = (ww - ops.width) / 2 - dw - ops.offset
            } else {
                l = (ww - ops.width) / 2 + ops.width + ops.offset
            }
            return l
        },
        getBottom: function () {
            var b = ops.bottom
            return b
        },
        setPosition: function () {
            var L = this.getLeft()
            var B = this.getBottom()
            $dom.style.left = L + "px"
            $dom.style.bottom = B + "px"
        },
        init: function () {
            this.setPosition()
            //显示与隐藏
            $win.onscroll = function () {
                //console.log(111)
                if (document.documentElement.scrollTop > ops.scrollTop) {
                    $dom.style.display = 'block'
                } else {
                    $dom.style.display = 'none'
                }
            }
            //浏览器窗口变化
            $win.onresize = function () {
                //console.log(222)
                opr.setPosition()
            }
            if (ops.isBack) {
                $dom.addEventListener("click", function () {
                    //console.log(333)
                    var timer = setInterval(function () {
                        if (document.documentElement.scrollTop > 0) {
                            var timer2 = setInterval(function () {
                                document.documentElement.scrollTop -= 10;
                                //当滑动条距顶部为0时,结束间隔任务
                                if (document.documentElement.scrollTop <= 1) {
                                    clearInterval(timer);
                                    clearInterval(timer2);
                                }
                            }, 1)
                        }
                    }, ops.speed)
                })
            }

            if (ops.ifShow) {
                $dom.style.display = 'block'
            } else {
                $dom.style.display = 'none'
            }
        }
    }
    opr.init()
    return $dom
}