jQuery实现返回顶部

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

 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实现返回顶部,古老的榕树,5-wow.com

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。