JavaScript返回顶部按钮实现

HTML5, JavaScript, Web设计 / 作者： / / 发表评论 / JavaScript, JS, 返回顶部

一、按钮显示

01
02
03
04
05
06
07
08
09
10
11
.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;
}
1
2
3
<div class='container'>
  <span id='toTop'></span>
</div>

二、自动隐藏与显示

01
02
03
04
05
06
07
08
09
10
11
$(window).on('scroll', function(e) {
    if (e.target.scrollingElement.scrollTop < 10) {
       $('#toTop').css({
           'opacity' : 0
       });
    } else {
       $('#toTop').css({
           'opacity' : 0.8
       });
    }
});

三、点击事件

1
2
3
4
5
6
7
8
9
$('#toTop').on('click', function() {
    $('body, html').animate({
        scrollTop : 0
    }, 500, function() {
        $('#toTop').css({
            'opacity' : 0
        });
    });
});
打赏微海报分享

相关文章

发表评论

欢迎阅读『JavaScript返回顶部按钮实现|HTML5、JavaScript、Web设计|Nick Tan-梓潼Blog』