Question to say "I can!"

JS点击返回页面顶部

2012-06-28

参考于:LMS——JS点击返回页面顶部

这个功能是目前比较通用的,就是没有滚动页面时不显示,滚动页面后固定显示在页面底部某个位置,点击后页面回到顶部。下面是代码:

首先是页面html代码,将它放到你的页面底部body结束前。

1
<a href="#" id="gotop" style="display: block; ">back up ↑</a>

然后是页面滚动后才显示点击按钮的JS代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
//backtotop
window.onscroll=backTop;
function backTop(){
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
if(scrollTop==0){
document.getElementById('gotop').style.display="none";
}else{
document.getElementById('gotop').style.display="block";
}
}
backTop();
(function($) {
   var isTransitioned = true;
   var transparent = 0;
   var translucent = 0.3;
   var opaque = 1;

   $(function() {

      $("#goTop").fadeTo(0,translucent);

      $("#goTop").mouseover(function() {
         if(isTransitioned) {
            $(this).fadeTo("slow",opaque);
         }
      }).mouseout(function() {
         if(isTransitioned) {
            $(this).fadeTo("slow",translucent);
         }
      });
   });
})(jQuery);

下面是点击还回顶部的JS代码

1
2
3
jQuery(document).ready(function($){
$('#gotop').click(function(){$('html,body').animate({scrollTop: '0px'}, 600);return false;});
});

最后加上CSS,后面三行是解决IE下的问题的。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
#gotop {
display: none;
position: fixed;
bottom: 20px;
left: 50%;
margin-left: 465px;
text-indent: -9999px;
height: 40px;
width: 40px;
background: 
#666 url("images/top.png") center center no-repeat;
opacity: 0.6;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
_position: absolute;
_bottom: auto;
_top: expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||20)-(parseInt(this.currentStyle.marginBottom,10)||20)));
}

看起来非常复杂,也许有更简单的吧。



作者:admin | Categories:设计问题 | Tags:

发表评论

电子邮件地址不会被公开。 必填项已用*标注

*

无觅相关文章插件,快速提升流量