页面滚动jq.html 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>页面滚动</title>
    <style>
        element.style {
            display: block;
        }
        
        .right-gotop {
            bottom: 210px;
            display: none;
            height: 50px;
            position: fixed;
            right: 5px;
            width: 50px;
        }
        
        .right-gotop a {
            background: #f4543c url("http://www.51yuansu.com/component/base/img/backtop.png") no-repeat scroll center center;
            display: block;
            height: 50px;
            width: 50px;
        }
        
        a {
            color: #666;
            text-decoration: none;
            transition: all 0.15s ease 0s;
        }
    </style>
    <script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
    <script>
        $(function() {
            $(window).scroll(function() {
                if ($(window).scrollTop() > 100) {
                    // alert($(window).scrollTop());
                    $(".right-gotop").fadeIn(100);
                } else {
                    $(".right-gotop").fadeOut(100);
                }
            });

            $("#right-gotop").click(function() {
                $('body,html').animate({
                    scrollTop: 0
                }, 600);
            });
        })
    </script>
</head>

<body style="height: 100000px">
    <div class="right-gotop">
        <a id="right-gotop" title="返回顶部" href="javascript:void(0);"></a>
    </div>
</body>

</html>

 

posted @ 2017-03-02 09:44  Mr_W_Blog  阅读(142)  评论(0)  编辑  收藏  举报