标签：
最近在学习js，学习的视频来源是妙味js视频，在此首先感谢。
学到BOM这块的时候感触颇多，老师用的例子是“返回顶部”这个效果，虽然是个很老的效果，但是从中获益颇多。现记录如下：
首先是HTML代码：
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <style> 5 #btn1 {position:fixed; bottom:0; right:0;} 6 </style> 7 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 8 <title>返回顶部效果</title> 9 </head> 10 <body> 11 aaa<br>aaa<br>aaa<br>aaa<br>aaa<br>aaa<br>aaa<br>aaa<br>aaa<br>aaa<br>aaa<br>aaa<br>aaa<br>aaa<br>aaa<br>aaa<br>aaa<br>aaa<br>aaa<br>aaa<br>aaa<br>aaa<br>aaa<br>aaa<br>aaa<br>aaa<br>aaa<br>aaa<br>aaa<br>aaa<br>aaa<br>aaa<br>aaa<br>aaa<br>aaa<br>aaa<br>aaa<br>aaa<br>aaa<br>aaa<br>aaa<br>aaa<br>aaa<br>aaa<br>aaa<br>aaa<br>aaa<br>aaa<br>aaa<br>aaa<br>aaa<br>aaa<br>aaa<br>aaa<br>aaa<br>aaa<br>aaa<br>aaa<br>aaa<br>aaa<br>aaa<br>aaa<br>aaa<br>aaa<br>aaa<br>aaa<br>aaa<br>aaa<br>aaa<br>aaa<br>aaa<br>aaa<br>aaa<br>aaa<br>aaa<br>aaa<br>aaa<br>aaa<br>aaa<br>aaa<br>aaa<br>aaa<br>aaa<br>bbbbbbbbbb<br>aaa<br>bbbbbbbbbb<br>aaa<br>bbbbbbbbbb<br>aaa<br>bbbbbbbbbb<br>aaa<br>bbbbbbbbbb<br>aaa<br>bbbbbbbbbb<br>aaa<br>bbbbbbbbbb<br>aaa<br>bbbbbbbbbb<br>aaa<br>bbbbbbbbbb<br>aaa<br>bbbbbbbbbb<br>aaa<br>bbbbbbbbbb<br>cccc<br>bbbbbbbbb<br>cccc<br>bbbbbbbbb<br>cccc<br>bbbbbbbbb<br>cccc<br>bbbbbbbbb<br>cccc<br>bbbbbbbbb<br>cccc<br>bbbbbbbbb<br>cccc<br>bbbbbbbbb<br>cccc<br>bbbbbbbbb<br>cccc<br>bbbbbbbbb<br>cccc<br>bbbbbbbbb<br>cccc<br>bbbbbbbbb<br>cccc<br>bbbbbbbbb<br>cccc<br>bbbbbbbbb<br>cccc<br>bbbbbbbbb<br>cccc<br>bbbbbbbbb<br>cccc<br>bbbbbbbbb<br>cccc<br>bbbbbbbbb<br>cccc<br>bbbbbbbbb<br>cccc<br>bbbbbbbbb<br>cccc<br>bbbbbbbbb<br>cccc<br>bbbbbbbbb<br>cccc<br>bbbbbbbbb<br>cccc<br>bbbbbbbbb<br>cccc<br>bbbbbbbbb<br>cccc<br> 12 <input id="btn1" type="button" value="回到顶部" /> 13 </body> 14 </html>
这里对btn1进行简单的样式处理，让它始终位于页面的右下角。
然后是js代码：
1 window.onload=function () 2 { 3 var oBtn=document.getElementById(‘btn1‘); //获取input标签 4 var bSys=true; //用来判断是否是系统定时器导致的滚动 5 var timer=null; //用来停止定时器 6 7 //如何检测用户拖动了滚动条 8 window.onscroll=function () 9 { 10 if(!bSys)//如果不是系统的滚动，也就是说是用户拖动滚动条导致的滚动 11 { 12 clearInterval(timer);//清空定时器 13 } 14 bSys=false; 15 }; 16 17 oBtn.onclick=function () 18 { 19 timer=setInterval(function (){ 20 var scrollTop=document.documentElement.scrollTop||document.body.scrollTop; 21 var iSpeed=Math.floor(-scrollTop/8); 22 23 if(scrollTop==0) 24 { 25 clearInterval(timer); 26 } 27 28 bSys=true; 29 document.documentElement.scrollTop=document.body.scrollTop=scrollTop+iSpeed; 30 }, 30); 31 }; 32 };
标签：
原文地址：http://www.cnblogs.com/wy-ouc/p/4683486.html
