backtotop-lgh

Back to Top (返回顶部按钮)

• 避免繁琐的滚动鼠标使其回到顶部,让浏览网页的过程中操作更加简单、便捷.

功能说明

1.可视区域,BackToTop按钮呈现隐藏状态; 超出可视区域BackToTop按钮呈现显示状态;

2.点击BackToTop按钮做匀减速运动, 回到页面顶部直至隐藏;

3.html标签 如a标签 添加自喜好的类名;

4.css设置自己喜好的按钮样式

4.js 设置 time 时间(默认30毫秒 可选) | el 获取按钮类名

起步

• 通过 npm / cnpm 安装

    npm / cnpm install backtotop-lgh --save

• 通过yarn安装

    yarn add backtotop-lgh

• 创建一个 id="a-top" html标签 (当然id值可自选)

    <!-- html -->

    <a href="javascript:;" id="a-top" title="返回顶部">Back to Top</a>

• 为该标签设置 css 样式(推荐样式)

    #a-top {
        font-size: 12px;
        color: #fafafa;
        padding: 10px 15px;
        border-radius: 8px;
        text-decoration: none;
        border: 1px solid #111111;
        background: -webkit-gradient(linear, left top, left bottom, from(#656565), to(#141414));
        position: fixed;
        bottom: 20px;
        right: 10px;
    }

    #a-top:hover {
        cursor: pointer;
        background: -webkit-gradient(linear, left top, left bottom, from(#141414), to(#656565));
    }

    #a-top:active {
        bottom: 19px;
        background: #141414;
    }

• 通过import引入backtotop-lgh，通过new操作符创建一个新的BackToTop对象。

    //javascript

    import BackToTop from 'backtotop-lgh'
    // let backtop = new BackToTop({ ... })
    new BackToTop({
        // <a href="javascript:;" id="a-top" title="返回顶部">Back to Top</a>
        el: document.getElementById('a-top'),
        // 默认30毫秒(可选)
        time: 30
    })

对象参数

    class BackToTop {

        constructor (opts) {}
            // 获取回到顶部按钮的ID
            let BackTop = opts.el;
            // 滚轮上滑时间速度(越大速度越慢|越小速度越快 呈现寻匀加速)
            let times = opts.time || 30;

            ........
            
            timer = setInterval(function () {}, times)

    }

update

v1.0.1 2018.6.29 : 解决Back To Top 按钮初始隐藏 滚动高度是小于可视区域高度:ScrollRollHeight < clientHeight。 v1.2.0 2018.7.2 : 解决与其他scroll插件冲突,onscroll->addEventListener相应提高兼容性。