jquery实现返回顶部按钮和scroll滚动功能[带动画效果]

小小大人物

2013-11-20

jquery实现返回顶部按钮和scroll滚动功能[带动画效果]

jQuery脚本：

1 <script type="text/javascript">
 2         $(function() {
 3             var scrollDiv = document.createElement('div');
 4             $(scrollDiv).attr('id', 'toTop').html('^ 返回顶部').appendTo('body');
 5             $(window).scroll(function() {
 6                 if ($(this).scrollTop() != 0) {
 7                     $('#toTop').fadeIn();
 8                 } else {
 9                     $('#toTop').fadeOut();
10                 }
11             });
12             $('#toTop').click(function() {
13                 $('body,html').animate({ scrollTop: 0 }, 800);
14             })
15         });
16     </script>

CSS样式：

1 <style type="text/css">
 2         #toTop
 3 {
 4             width: 100px;
 5             z-index: 10;
 6             border: 1px solid #333;
 7             background: #121212;
 8             text-align: center;
 9             padding: 5px;
10             position: fixed;
11             bottom: 0px;
12             right: 0px;
13             cursor: pointer;
14             display: none;
15             color: #fff;
16             text-transform: lowercase;
17             font-size: 0.9em;
18 }
19     </style>

带有iframe框架的滚动操作：

1  <script type="text/javascript">
 2 
 3         $().ready(function() {
 4             $('<div id="return_old_tips" class="btn_return_old" style="position:' + ($.browser.msie ? "absolute" : "fixed") + ';" onclick="return_old({$feedback_flag},\'{$current_url}\')">返回旧版</div>').appendTo($("body"));
 5             if ($.browser.msie) {
 6                 $("#return_old_tips").css("top", 200);
 7             }
 8             if ($.browser.msie) {
 9                 top.document.body.onscroll = function() {
10                     var f = 200 + (top.document.documentElement.scrollTop || top.document.body.scrollTop);
11                     if (f > parseInt($("body").height(), 10)) {
12                         f = parseInt($("body").height(), 10);
13                     }
14                     $("#return_old_tips").css({
15                         top: f,
16                         left: 0
17                     });
18                 }
19                 top.document.body.onresize = top.document.body.onscroll;
20             } else {
21                 $(window.parent.document).scroll(function() {
22                     var f = 200 + (top.document.documentElement.scrollTop || top.document.body.scrollTop);
23                     if (f > parseInt($("body").height(), 10)) {
24                         f = parseInt($("body").height(), 10);
25                     }
26                     $("#return_old_tips").css({
27                         top: f,
28                         left: 0
29                     });
30                 }).resize(function() {
31                     var f = 200 + (top.document.documentElement.scrollTop || top.document.body.scrollTop);
32                     if (f > parseInt($("body").height(), 10)) {
33                         f = parseInt($("body").height(), 10);
34                     }
35                     $("#return_old_tips").css({
36                         top: f,
37                         left: 0
38                     });
39                 });
40             }
41         });
42 
43    </script>

margin jquery jquery动画 padding scroll