原文地址：http://www.cnblogs.com/liguiqiang1986/articles/3132023.html

          
             
             
             
                 
             
             
             
                       
         
                        欢迎来到咿呀网，此技术由
          咿呀网(www.yy606.com)提供，欢迎大家使用
          
               此代码无版权所有，不管你是商业还是个人，都可放心使用，往下拖动可预览效果。
          
              
          回到顶部代码-源码下载
          
          
          
          
             
          点击进入咿呀网(www.yy606.com)
          
             技术交流 QQ群:22160972 邮箱：362217990@qq.com
          
    
         
        

 

main.css

@charset "utf-8";body{
       background:#f6f5f4;font-size:12px;color:#707070;font-family:"宋体",Arial, Helvetica, sans-serif;text-align:center;border: 0px; margin: 0px 0px 0px 0px;}/**回到顶部按钮样式**/#top_btn{
       word-break:break-all;position:fixed;border-radius: 6px;right:140px;bottom:150px;background:white;z-index: 50000; display: none;      -moz-transition:background 1s;      -webkit-transition:background 1s;      -o-transition:background 1s;}#top_btn a {
       display:block;width:50px;height:50px;background-image:url("../images/top1.png");background-repeat:no-repeat;border-radius: 6px;}#top_btn a:hover {
       background-image:url("../images/top2.png");}/** add by Da Luo en**/

 

准备两张图片：

top1.png:top2.png:

 

Js:    另外还需要jquery的js文件：jquery-1.7.min.js

//回到顶部按钮$(document).ready(function(){    var n=0;    var x=0;    var top_btn = $("");    $("body").append(top_btn);    $("body").attr("id","top");    var fe=$("#top_btn");    window.onscroll=function(){        x=(document.body.scrollTop||document.documentElement.scrollTop)+n;        if(x==0){fe.fadeOut().hide()}else{fe.fadeIn().show()};    };});

目录结构：

css

　　--main.css

images

     --top1.png

     --top2.png

js

     --jquery-1.7.min.js

     --public.js

index.html

 

 

 

 

 

标签:

绿色通道：

 

 

+加关注

0

0

 

(请您对文章做出评价)

 

上一篇：

下一篇：

posted on 2013-06-11 19:30 阅读(13) 评论(0)