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>