超简单的 jQuery 返回顶部按钮

simple jquery back to top button

为了增加网站的浏览体验,很多人都喜欢在页面中添加一个快速“返回顶部”的按钮,实现这个按钮的方法有很多,今天介绍一个利用 jQuery 实现返回顶部的超简单的方法。

简单功能

  • 当窗口向下滚动一定距离后,显示顶部按钮
  • 点击按钮返回页面顶部

jQuery 代码

$(document).ready(function(){
    // 页面向下滚动超过300px时按钮显示,否则隐藏
    $(window).scroll(function(){
    if($(this).scrollTop()>300){
    $('.back-to-top').fadeIn(100);
    } else {
    $('.back-to-top').fadeOut(100);
    }
    });
    // 点击按钮,向上动画滚动
    $('.back-to-top').click(function(event){
    event.preventDefault();
    $('html,body').animate({scrollTop:0},500);
    })
});

HTML 与 CSS

HTML 很简单,在页面底部(你想要的地方)添加一个 class="back-to-top"div 容器,里面可以添加你想要显示的文字或图标。

<div class="back-to-top">
    <span>返回顶部</span>
</div><!-- /.back-to-top -->

CSS 样式可以根据你的喜好自己设置,这里提供一个我使用的样式供大家参考。

.back-to-top {
    position: fixed;
    bottom: 3em;
    right: 3em;
    background-color: rgba(46, 46, 46, 0.8);
    text-align: center;
    padding: 10px 12px;
    color: #eee;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    cursor: pointer;
    display: none;
}

.back-to-top:hover {
    background: rgba(0, 221, 255, 0.8);
}

特别提出需要设置 position:fixed,这样按钮会跟随页面滚动。

OK!搞定,是不是很简单?

EOF

文章标签:

超简单的 jQuery 返回顶部按钮》有3条评论

发表评论

4O4B