首页 > 代码库 > Day6--------smoothScroll
Day6--------smoothScroll
//--------兼容版本的平滑滚动效果
//-------------使用百分比减值达到平滑的效果，使用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="http://www.mamicode.com/returnTop" id="returnTop" />47 </body>48 </html>
Day6--------smoothScroll
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。