身思乐,人事爱,稳恒不言败!

返回顶部 return top

第一种:

$(function(){
    var tophtml = "<div class=\"list-returnUp\"></div>";
    $('#returnTop').html(tophtml);
    var lastRmenuStatus=false;
    $(window).scroll(function(){//bug
        var _top = $(window).scrollTop();
        if(_top > 200){
            $('#returnTop').data('expanded',true);
        }else{
            $('#returnTop').data('expanded',false);
        }
        if($('#returnTop').data('expanded') != lastRmenuStatus){
            lastRmenuStatus=$('#returnTop').data('expanded');
            if(lastRmenuStatus){
                $('#returnTop .list-returnUp').slideDown();
            }else{
                $('#returnTop .list-returnUp').slideUp();
            }
        }
    });
    $('#returnTop').find('.list-returnUp').click(function(){
        $('html, body').animate({
            'scroll-top': 0
        }, 'fast');
    });
});

 

<div id="returnTop"></div>

 

.returnTop{
    display: none;
}
.list-returnUp{
    width: 72px;
    height: 73px;
    margin-bottom: 1px;
    cursor: pointer;
    position: fixed;
    right: 5%;
    bottom: 5%;
    z-index: 999;
    background: url(../images/r_top.png) 0px 0px no-repeat;
    background-color: rgba(102,102,102, 0.6);
    display: inline-block;
}
.list-returnUp:hover{
    background-color: #4398ED;
}

  第二种:

$(function(){
    var tophtml = "<div class=\"list-returnUp\" style=\"display:none\"></div>";
    $(tophtml).appendTo('body');
    var lastRmenuStatus=false;
    $(window).scroll(function(){//bug
        var _top = $(window).scrollTop();
        if(_top > 200){
            $('body').data('expanded',true);
        }else{
            $('body').data('expanded',false);
        }
        if($('body').data('expanded') != lastRmenuStatus){
            lastRmenuStatus=$('body').data('expanded');
            if(lastRmenuStatus){
                $('body .list-returnUp').slideDown();
            }else{
                $('body .list-returnUp').slideUp();
            }
        }
    });
    $('.list-returnUp').click(function(){
        $('html, body').animate({
            'scroll-top': 0
        }, 'fast');
    });
});

 

.list-returnUp{
    width: 72px;
    height: 73px;
    margin-bottom: 1px;
    cursor: pointer;
    position: fixed;
    right: 5%;
    bottom: 5%;
    z-index: 999;
    background: url(../images/r_top.png) 0px 0px no-repeat;
    background-color: rgba(102,102,102, 0.6);
    display: inline-block;
}
.list-returnUp:hover{
    background-color: #4398ED;
}