码迷,mamicode.com
首页 > Web开发 > 详细

Jquery回到顶部效果

时间:2014-11-07 14:20:32      阅读:162      评论:0      收藏:0      [点我收藏+]

标签:style   blog   http   io   color   ar   os   java   sp   

bubuko.com,布布扣
<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>
View Code

 

Jquery回到顶部效果

标签:style   blog   http   io   color   ar   os   java   sp   

原文地址:http://www.cnblogs.com/YiZhiZaiNvLi/p/4081027.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!