HTML,CSS,JS 一键回到网页顶部

    效果图

   

   

   

    Html代码

<div id="gotop"><a class="gotop"></a></div>

   

    CSS代码

.gotop {
    cursor: pointer;
    position: fixed;
    right: 25px;
    bottom: 25px;
    z-index: 99999;
    display: block;
    width: 50px;
    height: 50px;
    background: url(../images/backtop.png) no-repeat 0 0;
    opacity: 0.5;
    filter: alpha(opacity=50);

    /*动画效果*/
    outline: none;
    transition: all 0.30s ease-in-out;
    -webkit-transition: all 0.30s ease-in-out;
    -moz-transition: all 0.30s ease-in-out;
    -o-transition: all 0.30s ease-in-out;
    -ms-transition: all 0.30s ease-in-out;
}

    .gotop:hover {
        background: url(../images/backtop.png) no-repeat 0 -52px;
    }

    图片backtop.png

   

   

    JS代码

$("#gotop").hide();
$(window).scroll(function () {
    if ($(window).scrollTop() > 100) {
        $("#gotop").fadeIn()
    } else {
        $("#gotop").fadeOut()
    }
});
$("#gotop").click(function () {
    $('html,body').animate({
        'scrollTop': 0
    }, 500)
});