您的位置:首页 > Web前端 > JQuery

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

2012-07-13 11:21 956 查看
转载自:老驴的博客

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 //-->
44     </script>
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: