返回顶部

by l xk

HTML

<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<div style="height:3500px;background-color:black"></div>
<div id="code_img"></div>
<div class="scrollBtn" id="scrollBtn">
    <ul class="clearfix">
        <li class="sB-home"> <a href="#" class="ff-t" id="goHome" title="返回首页">
                    <b>返回首页</b>
                </a>

        </li>
        <li class="sB-comment"> <a href="#" class="ff-t" id="goCmt" title="网友评论">
                    <b>评论</b>
                    <span id="cmtNum2">10</span>
                </a>

        </li>
        <li class="sB-share"> <a href="#" id="goAbout" title="相关阅读">
                    <b>相关链接</b>
                </a>

        </li>
        <li class="sB-goTop" id="goTop"> <a href="javascript:void(0)" title="返回顶部">
                    <b>返回顶部</b>
                </a>ss</li>
    </ul>
</div>

CSS

/*metro gotop s*/
 ul, li {
    margin: 0;
    padding: 0;
}
ul {
    list-style: none;
}
.clearfix:before, .clearfix:after {
    content:"";
    display: table;
}
.clearfix:after {
    clear: both;
}
.clearfix {
    zoom: 1;
}
.ff-t {
    font-family: Tahoma;
}
.scrollBtn {
    position: fixed;
    width: 54px;
    _position: absolute;
    right: 42px;
    bottom: 45px;
}
.scrollBtn a {
    background: url(http://images.cnblogs.com/cnblogs_com/ChenXu-net/517141/o_gototop.png) no-repeat 0 0;
    display: inline-block;
    width: 54px;
    height: 54px;
    overflow: hidden;
    color: #fff;
    filter: Alpha(Opacity=60);
    opacity: 0.6;
    -moz-transition: opacity 0.5s ease;
    -webkit-transition: opacity 0.5s ease;
    -o-transition: opacity 0.5s ease;
    transition: opacity 0.5s ease;
    text-align: center;
}
.scrollBtn a, .scrollBtn a:link, .scrollBtn a:visited, .scrollBtn a:hover {
    color: #fff;
}
.scrollBtn li {
    float: left;
    height: 54px;
    margin-bottom: 5px;
    overflow: hidden;
}
.scrollBtn a:hover {
    text-decoration: none;
}
.scrollBtn a:hover {
    filter: Alpha(Opacity=100);
    opacity: 1;
}
.scrollBtn a b {
    display: none;
}
/*评论*/
 .sB-comment a {
    background-position: 0 -59px;
    padding-top: 34px;
    padding-bottom: 3px;
    height: 17px;
}
/*二维码*/
 .sB-share a {
    background-position: 0 -118px;
}
/*返回顶部*/
 .sB-goTop a {
    background-position: 0 -177px;
}
/*二维码图片*/
 #code_img {
    width: 266px;
    height: 266px;
    background: url(http://images.cnblogs.com/cnblogs_com/ChenXu-net/517141/o_Code.png) no-repeat;
    background-color: black;
    position: fixed;
    right: 105px;
    bottom: 67px;
    cursor: pointer;
    display: none;
    _position: absolute;
    _bottom: auto;
    _top: expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop, 10)||0)-(parseInt(this.currentStyle.marginBottom, 10)||0)));
    _margin-bottom:...

JavaScript

$(function () {

    $("li[id=goTop]").click(function () {

        //$(document).scrollTop(0);  //立即返回顶部,没有特效

        //平滑滚动,速度有三个选项 slow为适中速度  medium ,slow,fast
        $('html, body').animate({
            scrollTop: 0
        }, 'slow');
    });

    //滚动事件
    $(window).scroll(function (e) {
        t = $(document).scrollTop();
    if (t > 0) {
        $('#goTop').fadeIn(300);
    } else {
        $('#goTop').fadeOut(200);
    }
    });

})