web实现jq返回顶部的实现

返回顶部按钮

html部分代码

<img id="to-top" src="./images/go_top.png" alt="">

css部分代码

#to-top{

    position: fixed;

    bottom: 30px;

    right: 30px;

    cursor: pointer;

    display: none;   //加载进来不会显示按钮

    opacity: 0.6;

}

 #to-top:hover {

            opacity: 1;

        }

js部分代码

   $("#to-top").on("click",ToTop)

    function ToTop(){

        $("html,body").animate({

            scrollTop: 0

        }, 900);

    }

     // 当滚动条的垂直位置大于浏览器高度时，显示回到顶部按钮

     $(window).on("scroll", function () {

        if ($(window).scrollTop() > $(window).height())

            backBtn.fadeIn();

        else

            backBtn.fadeOut();

    });