其他分享
首页 > 其他分享> > jquery 实现返回顶部按钮

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;
    }

 

标签:jquery,body,200,顶部,100px,backTop,按钮,scrollTop,document
来源: https://www.cnblogs.com/pg-13/p/15727052.html