代码改变世界

jQuery实现返回顶部

2014-08-13 10:23  大额_skylar  阅读(323)  评论(0)  编辑  收藏  举报

由于项目需要，写了个返回顶部的小功能...

 1     /*返回顶部*/
 2     function toTop() {
 3         $(".to_top").hide();
 4         $(window).scroll(function(){
 5             var scroll_top = $(document).scrollTop();
 6             if(scroll_top != 0){
 7                 $(".to_top").show();
 8             }else{
 9                 $(".to_top").hide();
10             }
11         });
12         $(".to_top").click(function(){
13             $("body,html").animate({scrollTop:0},500);
14             $(".to_top").hide();
15            
16         });
17          $(".to_top").mouseover(function(){
18             $(".to_top").css({
19                 "filter":"alpha(opacity=70)",
20                 "-moz-opacity":"0.7",
21                 "opacity":"0.7"
22             });
23              return false;
24         });
25           $(".to_top").mouseout(function(){
26             $(".to_top").css({
27                 "filter":"alpha(opacity=50)",
28                 "-moz-opacity":"0.5",
29                 "opacity":"0.5"
30             });
31              return false;
32         });
33     }
34     toTop();

值得注意的是scrollTop()方法：

      它的作用是获取匹配元素相对滚动条顶部的偏移。（此方法对可见和隐藏元素均有效）

      用法：

          比如设置相对滚动条顶部的偏移：$("div.demo").scrollTop(300);

 

在html和css代码中也需要注意定位反回顶部按钮的位置和使他浮在现有元素之上。

html代码：

1 <div class="to_top" style="z-index:99999;display:block;">
2  </div>

css代码：

 1 /*这里是返回顶部按钮*/
 2 .to_top {
 3     position:fixed;
 4     display:block;
 5     background: url(../../images/footer-totop.png) no-repeat;
 6     filter:alpha(opacity=50);
 7     -moz-opacity:0.5;
 8     opacity:0.5;
 9     float:right;
10     width:60px;
11     height:60px;
12     margin-top:37%;
13     margin-left:95%;
14 }