JQuery和Awesome实现炫酷【返回顶部】按钮

Gary

8 年前

之前通过JQuery+纯CSS实现了返回顶部的功能，比较轻量级：JQuery+CSS实现【返回顶部】按钮，不需要图片。

现在我们再用JQuery+Awesome实现更炫酷的“返回顶部”按钮。

效果如下：

按钮的工作流程大致是：页面加载后按钮隐藏，向下拖动显现，鼠标悬浮时变色（颜色可以更改），点击返回顶部。

代码如下，复制成HTML文件保存即可看到效果。

<!DOCTYPE html>
<html>
<head>
    <script src="//cdn.bootcss.com/jquery/2.1.0/jquery.min.js"></script>
    <link href="//cdn.bootcss.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet">
    <script type="text/javascript">
        (function ($) {
            $(document).ready(function () {
                $(window).scroll(function () {
                    if ($(this).scrollTop() > 100) {
                        $('#back-top').addClass('show-totop');
                    } else {
                        $('#back-top').removeClass('show-totop');
                    }
                });
                $('#back-top').find('a').click(function () {
                    $('body,html').stop(false, false).animate({scrollTop: 0}, 150);
                    return false;
                });
            });
        })(jQuery);
    </script>
    <style>
        #back-top {
            position: fixed;
            visibility: hidden;
            margin: 0 20px 20px 0;
            right: 0;
            bottom: -100px;
            overflow: hidden;
            z-index: 99;
        }

        #back-top.show-totop {
            visibility: visible;
            bottom: 0;
        }

        #back-top.mobile-back-top {
            -webkit-transform: scale(0.7);
            -ms-transform: scale(0.7);
            -o-transform: scale(0.7);
            transform: scale(0.7);
            margin: 0 2px 1px 0;
        }

        #back-top a {
            background: #555555;
            cursor: pointer;
        }

        #back-top a:hover {
            background: #fcc300;
        }

        #back-top a {
            display: block;
            border-radius: 50%;
            width: 50px;
            height: 50px;
            text-align: center;
            text-decoration: none;
            color: #fff;
        }

        #back-top a:before {
            content: '\f077';
            font: 25px/50px FontAwesome;
        }
    </style>
</head>
<body>
    <div id="back-top">
        <a href="#" title="Back To Top"></a>
    </div>
    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
</body>
</html>