返回顶部

时间：2014-11-11 20:47:26 阅读：93 评论：0 收藏：0 [点我收藏+]

标签：返回顶部 style blog http io color ar os sp

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>

View Code

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>

View Code

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 }

View Code

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/8
10 </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="开始运动" id="obt"/>
38 <div id="div1"></div>
39 <span></span>
40 </body>
41 </html>

View Code

5、待续...

返回顶部

标签：返回顶部 style blog http io color ar os sp

原文地址：http://www.cnblogs.com/codc-5117/p/4071804.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行