首页 > 代码库 > 返回顶部
返回顶部
1、返回顶部（完全兼容各个浏览器，不含美化）
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 <title>无标题文档</title> 6 <style type="text/css"> 7 #div1 { 8 width:20px; 9 height:100px;10 position:absolute;11 top:0;12 right:0;13 background:#f00;14 }15 </style>16 17 <script>18 //完全兼容所有浏览器19 var bSys=null;//标志用户滚动了滚动条20 var timer=null;21 window.onload=window.onresize=window.onscroll=function() { 22 var oDiv=document.getElementById("div1");23 var sctop=document.body.scrollTop||document.documentElement.scrollTop;24 var t=(document.documentElement.clientHeight-oDiv.offsetHeight)/2; 25 oDiv.style.top=sctop+t+‘px‘;26 //检测用户滚动了滚动条 27 if(!bSys) {28 clearInterval(timer); 29 }30 bSys=false;31 32 oDiv.onclick=function() {33 timer=setInterval(function() {34 var scrolltop=document.body.scrollTop||document.documentElement.scrollTop;35 var ispeed=Math.floor(-scrolltop/8);36 if(scrolltop==0) {37 clearInterval(timer); //当scrolltop为0的时候，就停止这个定时器38 }39 bSys=true;40 document.documentElement.scrollTop=document.body.scrollTop=scrolltop+ispeed;41 },30); 42 }; 43 };44 </script>45 </head>46 47 <body>48 1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>49 <div id="div1">返回顶部</div>50 </body>51 </html>
2、返回顶部2（完全兼容各个浏览器，含美化+缓冲）
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>返回顶部+缓冲</title> 6 <style> 7 #div1{width:100px; height:50px; position:absolute; right:0px; top:0px;background:red;} 8 span{position: absolute; left:300px; top:0px;; display:inline-block; width:1px; height:200px; background:blue;} 9 //运动缓冲：主要是在速度上，做了一个变速，利用：offsetLeft-iTarget/8; iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed);10 </style>11 <script>12 13 window.onload=window.onscroll=window.onresize=function() {14 var oDiv=document.getElementById("div1");15 var sct=document.documentElement.scrollTop||document.body.scrollTop;16 var t=sct+(document.documentElement.clientHeight-oDiv.offsetHeight)/2; 17 startMove(parseInt(t)); //scrolltop,ff/ie:document.documentElement chrome:document.body获取18 };19 20 21 var timer=null;22 function startMove(iTarget) { 23 var oDiv=document.getElementById("div1");24 var iSpeed=null;25 clearInterval(timer); 26 timer=setInterval(function() {27 iSpeed=(iTarget-oDiv.offsetTop)/8;28 iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed); //变速改变速度29 if(oDiv.offsetTop==iTarget) {30 clearInterval(timer);31 }32 else {33 oDiv.style.top=oDiv.offsetTop+iSpeed+‘px‘;34 } 35 },30);36 }37 </script>38 </head>39 <body style="height:2000px;">40 </body>41 </html>
3、拖拽（完全兼容各个浏览器，不含美化）
1 function drag() { 2 var oDiv=document.getElementById(‘div1‘); 3 var disX=disY=0; 4 oDiv.onmousedown=function(ev) { 5 var oEvent=ev||event; 6 disX=oEvent.clientX-oDiv.offsetLeft; 7 disY=oEvent.clientY-oDiv.offsetTop;//保存物体以鼠标单击瞬间时的位置 8 9 document.onmousemove=function(ev) {10 var oEvent=ev||event;11 var l=oEvent.clientX-disX; 12 var t=oEvent.clientY-disY;13 if(l<0)14 l=0;15 else if(l>document.documentElement.clientWidth-oDiv.offsetWidth)16 l=document.documentElement.clientWidth-oDiv.offsetWidth;17 if(t<0)18 t=0;19 else if(t>document.documentElement.clientHeight-oDiv.offsetHeight)20 t=document.documentElement.clientHeight-oDiv.offsetHeight;21 oDiv.style.left=l+‘px‘;22 oDiv.style.top=t+‘px‘; 23 };24 25 document.onmouseup=function() {26 document.onmousemove=document.onmouseup=null;27 };28 return false;//解决ff早期的bug发生29 };30 31 32 }
4、缓冲运动（//运动缓冲：主要是在速度上，做了一个变速，利用：offsetLeft-iTarget/8; iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed);）
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>无标题文档</title> 6 <style> 7 #div1{width:100px; height:50px; position:absolute; left:700px; top:50px;background:red;} 8 span{position: absolute; left:300px; top:0px;; display:inline-block; width:1px; height:200px; background:blue;} 9 //运动缓冲：主要是在速度上，做了一个变速，利用：offsetLeft-iTarget/810 </style>11 <script>12 window.onload=function() {13 var oDiv=document.getElementById("div1");14 var obt=document.getElementById("obt");15 var timer=null;16 var iSpeed=null;17 var iTarget=300;18 obt.onclick=function() {19 clearInterval(timer);20 21 timer=setInterval(function() {22 iSpeed=(iTarget-oDiv.offsetLeft)/8;23 iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed);24 if(oDiv.offsetLeft==iTarget) {25 clearInterval(timer);26 }27 else {28 oDiv.style.left=oDiv.offsetLeft+iSpeed+‘px‘;29 } 30 },30); 31 };32 };33 </script>34 </head>35 36 <body>37 <input type="button" value="http://www.mamicode.com/开始运动" id="obt"/>38 <div id="div1"></div>39 <span></span>40 </body>41 </html>
5、待续...
返回顶部
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。