新航路师徒学院

 找回密码
 立即注册
搜索
查看: 369|回复: 0

【新航路】返回顶部js 源代码

[复制链接]

80

主题

114

帖子

560

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
560
发表于 2016-8-31 12:22:48 | 显示全部楼层 |阅读模式
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>返回顶部</title>
  6. <meta name="description" content="返回顶部" />
  7. <meta name="keywords" content="返回顶部" />
  8. <link rel="stylesheet" href="../css/index.css"/>
  9. <style>
  10. .m980 {width:980px;margin:0 auto;border:1px solid red;}
  11. .l_h400 {height:400px;margin:0 auto;background:#f60;width:600px;margin-top:10px;}
  12. </style>
  13. </head>
  14. <body style="height:2000px;">
  15. <div class="bodybg">
  16. <div>
  17.         <div class="l_h400"></div>
  18.         <div class="l_h400"></div>
  19.         <div class="l_h400"></div>
  20.         <div class="l_h400"></div>
  21.         <div class="l_h400"></div>
  22.         <div class="l_h400"></div>
  23.         <div class="l_h400"></div>
  24. </div>
  25. </div>
  26. <script src="returntop.js"></script>
  27. <!--
  28. 只需引一此js就可以了 returntop.js

  29. -->
  30. </body>
  31. </html>
复制代码


  1. document.write('<div id="k_icopos" class="k_spico"><a href="javascript:void(0)" hidefocus="true" class="k_returntop bb" id="k_returntop" title="top"> </a></div><style>.k_spico {width:50px;height:50px;position:fixed;_position:absolute;display:none;cursor:pointer;}.k_returntop {display:block;width:50px;height:50px;background:url(http://csdnimg.cn/www/images/top_arrow.png) no-repeat 0 0;}.k_returntop:hover {filter:alpha(opacity=60);opacity:0.6;text-decoration:none;}</style>');
  2. function addEvent(obj,type,fn){
  3.         if(!obj){return null;}
  4.         if(obj.addEventListener){
  5.                 obj.addEventListener(type,function (ev){
  6.                         var rtn=fn.call(obj,ev);
  7.                         if(rtn==false){
  8.                                 ev.cancelBubble=true;
  9.                                 ev.preventDefault();
  10.                         }
  11.                 },false);
  12.         }else{
  13.                 obj.attachEvent('on'+type,function (){
  14.                         var rtn=fn.call(obj,event);
  15.                         if(rtn==false){
  16.                                 event.cancelBubble=true;
  17.                                 return false;
  18.                         }
  19.                 })
  20.         }
  21. };
  22. function ReturnTop(obj,obj2,num,num2){
  23.         if(!obj){return null;}
  24.         this.obj = document.getElementById(obj);
  25.         this.obj2 = document.getElementById(obj2);
  26.         this.bSys = true;
  27.         this.scrollTop = 0;
  28.         this.timer = null;
  29.         this.iSpeed = 0;
  30.         this.iTop = 0;
  31.         this.iLeft = 0;
  32.         this.oBottom = num;
  33.         this.oWidth = num2;
  34.         var _this = this;
  35.         addEvent(window,'scroll',function(){
  36.                 _this.moveFn();       
  37.         })
  38.         addEvent(window,'resize',function(){
  39.                 _this.moveFn();
  40.         })
  41. }
  42. ReturnTop.prototype.moveFn = function(){
  43.         var _this = this;
  44.         var GLOBAlIE6= /msie 6/ig.test(window.navigator.userAgent) && !/msie [1-57-9]/ig.test(window.navigator.userAgent);
  45.         this.scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
  46.         this.iTop = document.documentElement.clientHeight-this.oBottom+this.scrollTop;
  47.         this.iLeft = (document.documentElement.clientWidth-this.oWidth)/2+this.oWidth;
  48.         if(this.scrollTop>0){
  49.                 this.obj.style.display = 'block';
  50.                 this.obj.style.left = this.iLeft + 'px';
  51.                 if(GLOBAlIE6){
  52.                         this.obj.style.top = this.iTop + 'px';
  53.                         if((css(document.body,'backgroundAttachment') !== "fixed") && (css(document.body,'backgroundImage') === "none")){
  54.                                 document.body.style.backgroundRepeat = "no-repeat";
  55.                                 document.body.style.backgroundImage = "url(about:blank)";
  56.                                 document.body.style.backgroundAttachment = "fixed";
  57.                         }
  58.                 }else {
  59.                         this.obj.style.top = this.iTop-this.scrollTop + 'px';
  60.                 }
  61.         }else {
  62.                 this.obj.style.display = 'none';
  63.         }
  64.         if(!this.bSys){
  65.                 clearInterval(_this.timer);
  66.         }
  67.         this.bSys = false;
  68.         this.obj2.onclick =  function(){
  69.                 _this.topFn();
  70.                 _this.bSys = false;
  71.         }
  72. }
  73. ReturnTop.prototype.topFn = function(){
  74.         var _this = this;
  75.         clearInterval(_this.timer);
  76.         this.timer = setInterval(function(){
  77.                 _this.setToFn();
  78.         },50)
  79. }
  80. ReturnTop.prototype.setToFn = function(){
  81.         var _this = this;
  82.         this.iSpeed = Math.floor(-this.scrollTop/8);
  83.         if(this.scrollTop==0){
  84.                 clearInterval(_this.timer);
  85.         }
  86.         this.bSys = true;
  87.         document.documentElement.scrollTop = document.body.scrollTop = this.scrollTop + this.iSpeed;
  88. }
  89. var toTop = new ReturnTop('k_icopos','k_returntop',200,980);
复制代码


回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

新航路师徒学院 ( 京ICP备16035622号

GMT+8, 2018-5-23 09:33 , Processed in 0.150413 second(s), 26 queries .

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表