Jquery回到顶部效果

浏览数：22 / 时间：2015年06月09日

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style type = "text/css">
        #sp{ position:fixed; top:70%; left:82.5%; cursor:pointer;}
    </style>
    <script type = "text/javascript" src = "JueryPractice/jquery-1.7.2.min.js"></script>
    <script type ="text/javascript">
        $(document).ready(function () {
            $("#sp").hide();
            $(function () {
                $(window).scroll(function () { //移动浏览器的滚动条时触发
                    if ($(window).scrollTop() > 100) {
                        $("#sp").fadeIn(1000);
                    }
                    else {
                        $("#sp").fadeOut(1000);
                    }
                });
            });
            $("#sp img").click(function () {
                $("body,html").animate({ scrollTop: 0 }, 1500, false);
            });

            //匹配id为sp选择器紧邻的第一个选择器
            $("#sp + p").click(function () {
                $("#sp + p").animate({ "height": 300 }); //改变元素的高度
            });

            $("#chui").click(function () {
                alert($(window).scrollTop()); //获取滚动条距离浏览器顶端的垂直高度
            });

            $("#shui").click(function () {
                alert($(window).scrollLeft());
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <p id = "sp"><span></span><img src = "images/2011082113443606.gif.jpg" alt = "无法显示" /></p>
    <p style = " position:absolute; top:2000px; cursor:pointer; background-color:Green">顶部</p>
    </div>
    </form>
</body>
</html>