码迷,mamicode.com
首页 > Web开发 > 详细

jQuery实现返回顶部

时间:2014-08-13 12:23:26      阅读:221      评论:0      收藏:0      [点我收藏+]

标签:返回顶部   style   blog   color   os   io   ar   cti   

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

 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 }

 

 

     

jQuery实现返回顶部,布布扣,bubuko.com

jQuery实现返回顶部

标签:返回顶部   style   blog   color   os   io   ar   cti   

原文地址:http://www.cnblogs.com/skylar/p/3909390.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!