//--------兼容版本的平滑滚动效果 //-------------使用百分比减值达到平滑的效果，使用body.scrollTop||documentElement.scrollTop检测浏览器内核，使用bySys检测用户的滚动行为 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 <title>smoothScroll</title>
6 </head>
7 <style type="text/css">
8 #returnTop{position: fixed;bottom: 40px;right: 40px;}
9 </style>
10 <script type="text/javascript">
11 window.onload=function(){
12 var i=0;
13 var timer=null;
14 var bySys=true;
15 oUl=document.getElementsByTagName(‘ul‘)[0];
16 oBtn=document.getElementsByTagName(‘input‘)[0];
17 for(i=0;i<10;i++){
18 oUl.innerHTML+=oUl.innerHTML;
19 }
20 window.onscroll=function(){
21 if(!bySys) clearInterval(timer);
22 bySys=false;
23 }
24 oBtn.onclick=function(){
25 if(document.body.scrollTop){
26 timer=setInterval(function(){
27 bySys=true;
28 document.body.scrollTop-=Math.ceil(0.2*document.body.scrollTop);
29 if(document.body.scrollTop==0) clearInterval(timer);
30 },30);
31 }
32 if(document.documentElement.scrollTop){
33 timer=setInterval(function(){
34 bySys=true;
35 document.documentElement.scrollTop-=Math.ceil(0.2*document.documentElement.scrollTop);
36 if(document.documentElement.scrollTop==0) clearInterval(timer);
37 },30);
38 }
39 }
40 }
41 </script>
42 <body>
43 <ul>
44 <li>111</li>
45 </ul>
46 <input type="button" value="returnTop" id="returnTop" />
47 </body>
48 </html>
时间： 2024-08-07 20:27:01