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

分类：技术交流时间：2021-02-28 20:55 浏览：551

概述

Html代码1<div id="gotop"><a class="gotop"></a></div>CSS代码12345678910111213141516171819202122232425.gotop { cursor: pointer; position

内容

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

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

}

$("#gotop").hide();

$(window).scroll(function () {

    if ($(window).scrollTop() > 100) {

        $("#gotop").fadeIn()

    } else {

        $("#gotop").fadeOut()

}

});

$("#gotop").click(function () {

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

        'scrollTop': 0

    }, 500)

});

点击排行