JavaScript返回顶部按钮实现

一、按钮显示

.container #toTop {
    width: 40px;
    height: 60px;
    display: inline-block;
    position: fixed;
    background: url(top.png) no-repeat;
    background-size: 100%;
    bottom:20px;
    right: 20px;
  opacity: 0;
}
<div class='container'>
  <span id='toTop'></span>
</div>

二、自动隐藏与显示

$(window).on('scroll', function(e) {
    if (e.target.scrollingElement.scrollTop < 10) {
       $('#toTop').css({
           'opacity' : 0
       });
    } else {
       $('#toTop').css({
           'opacity' : 0.8
       });
    }
});

三、点击事件

$('#toTop').on('click', function() {
    $('body, html').animate({
        scrollTop : 0
    }, 500, function() {
        $('#toTop').css({
            'opacity' : 0
        });
    });
});

发表评论