jquery 实现返回顶部按钮

HTML代码

<div id="backTop"></div>

css

#backTop {
    display: none;
    width: 45px;
    height: 50px;
    z-index: 12; //使该div  在图像最上层
    background: url("http://g-0.ss.faisys.com/image/backToTop/04.png?v=201505251717");
    position: fixed;
    bottom: 100px;
    right: 100px;
}

js

    let backTop =document.getElementById('backTop')
    $(document).ready(()=>{
        $(document).scroll(()=> {
            if (document.body.scrollTop > 200 || document.documentElement.scrollTop > 200) {
                $("#backTop").slideDown("slow");
            } else {
                backTop.style.display = "none";
            }
        });
    });
    backTop.onclick = function () {
        document.body.scrollTop = 0;
        document.documentElement.scrollTop = 0;
    }

 

上一篇:Linux - MySql应用(一) - 本地使用mysql命令连接


下一篇:门面模式 与 装饰器模式(3)