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

之前通过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>

 

1条评论

商学院 says: 回复

这个号 ,用户体验好

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注

昵称 *