当前位置:芝麻通 > 网页素材

自适应页面向下滑动一定搞定后显示返回头部按钮

自适应页面向下滑动一定搞定后显示返回头部按钮
 <div class="backtop"><em></em></div>
/*回到顶部*/
.backtop{width: 50px;height: 50px;position: fixed;bottom: 120px;right: 100px;border:1px solid #efefef;cursor: pointer;background-color: #fff;text-align: center;}
.backtop:hover{background:#efefef}
.backtop em{width: 21px;height: 20px;bottom: 120px;background: url(img/top.png) no-repeat;cursor: pointer;display: inline-block;margin-top: 14px;}
@media (max-width:767px){
    .backtop{right:20px;}
}
$(window).scroll(function(){
    if ($(window).scrollTop()>50){//超过50显示
        $('.backtop').fadeIn(800);
    }
    else{
        $('.backtop').fadeOut(800);
    }
});
$(".backtop ").click(function(){
    $('body,html').animate({scrollTop:0},500);
    return false;
});

[声明]本站素材来自用户分享,仅限学习交流请勿用于商业用途。如损害你的权益请联系zhimatong@qq.com删除。