使用JQuery实现页面返回顶部效果 

 1 <html xmlns="http://www.w3.org/1999/xhtml">
 2 <head runat="server">
 3     <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
 4     <title>JavaScript实现返回顶部效果演示</title>
 5     <style type="text/css">
 6         .backToTop
 7         {
 8             display: none;
 9             width: 18px;
10             line-height: 1.2;
11             padding: 5px 0;
12             background-color: #000;
13             color: #fff;
14             font-size: 12px;
15             text-align: center;
16             position: fixed;
17             _position: absolute;
18             right: 10px;
19             bottom: 100px;
20             _bottom: "auto";
21             cursor: pointer;
22             opacity: .6;
23             filter: Alpha(opacity=60);
24         }
25     </style>
26 </head>
27 <body>
28     <form id="form1" runat="server">
29     <div>
30         <img src="example1.jpg" alt="演示图片" />
31     </div>
32     <div>
33         <span>北方有佳人，</span><br />
34         <span>绝世而独立。</span><br />
35         <span>一顾倾人城，</span><br />
36         <span>再顾倾人国。</span><br />
37         <span>宁不知倾城与倾国，</span><br />
38         <span>佳人难再得。</span><br />
39         <br />
40         <br />
41         <span>床前明月光，</span><br />
42         <span>疑是地上霜。</span><br />
43         <span>举头望明月，</span><br />
44         <span>低头思故乡。</span><br />
45     </div>
46     </form>
47 </body>
48 </html>
49 <script type="text/javascript">
50     (function () {
51         var $backToTopTxt = "返回顶部", $backToTopEle = $('<div class="backToTop"></div>').appendTo($("body"))
52                 .text($backToTopTxt).attr("title", $backToTopTxt).click(function () {
53                     $("html, body").animate({ scrollTop: 0 }, 120);
54                 }),
55         $backToTopFun = function () {
56             var st = $(document).scrollTop(), winh = $(window).height();
57             (st > 0) ? $backToTopEle.show() : $backToTopEle.hide();
58             //IE6下的定位         
59             if (!window.XMLHttpRequest) {
60                 $backToTopEle.css("top", st + winh - 166);
61             }
62         };
63         $(window).bind("scroll", $backToTopFun);
64         $(function () {
65             $backToTopFun();
66         });
67     })();
68 </script>

 

posted @ 2013-05-26 16:25  和风霁月  阅读(132)  评论(0)    收藏  举报