JS--回到顶部代码

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

JS--回到顶部代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
  <head>

    <title>咿呀网-回到顶部代码</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">    
    <meta property="wb:webmaster" content="16bbac153114060f" />
    <meta name="keywords" content="咿呀网,回到顶部代码">
    <meta name="description" content="咿呀网,回到顶部代码">
    <link href="css/main.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" charset="utf-8" src="js/jquery-1.7.min.js"></script>
<script type="text/javascript" charset="utf-8" src="js/public.js"></script>
  </head>  
  <body>
    <div style="height:800px;text-align: center;">
              欢迎来到咿呀网，此技术由<a style="color:red" target="_blank" href="http://www.yy606.com">咿呀网(www.yy606.com)</a>提供，欢迎大家使用<br>
               此代码无版权所有，不管你是商业还是个人，都可放心使用，往下拖动可预览效果。<br>
              <a href="top.zip">回到顶部代码-源码下载</a><br><br><br><br>
             <a style="color:red" target="_blank" href="http://www.yy606.com">点击进入咿呀网(www.yy606.com)</a><br>
             技术交流 QQ群:22160972 邮箱：362217990@qq.com<br>
    </div>
    
    </body>
</html>

View Code

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**/

View Code

准备两张图片：

top1.png:top2.png:

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

//回到顶部按钮
$(document).ready(function(){
    var n=0;
    var x=0;
    var top_btn = $("<span id='top_btn'><a title='回到顶部' href='#top'></a></span>");
    $("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()};
    };
});