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:

發表評論

電子郵件地址不會被公開。 必填項已用*標注

*

澳洲f1赛车b盘开奖套路 叶小姐石家庄按摩v 微乐宁夏划水麻将 竞彩足球比分预测app 国内十大期货配资公司 2013中日足球直播 今晚3d试机号是多 大沢佑香最变态作品 打麻将必胜绝技 湖北福彩30选五今天开奖结果 明星上海麻将官方下载 樱井莉亚作品 北京赛车 3d杀码预测 篮球即时比分 指数 2012上证指数 重庆最新幸运农场开奖