效果:当用户点击回到顶部按钮页面元素慢慢滚动到顶部。
主要用到BOM中scollTop(滚动条的垂直坐标)结合运动思想。
注意浏览器兼容性。
用onscoll事件判断是用户拖动滚动条。
<script type="text/javascript">
var isScoll;
var timer;
window.οnscrοll=function(){
if(!isScoll)
{
clearInterval(timer);
}
isScoll=false;
//用户在滑动过程中拉滚动条,清除定时器
}
window.οnlοad=function(){
var oBtn1=document.getElementById('btn1');
//获取button元素
oBtn1.οnclick=function(){
timer=setInterval(function(){
var scollTop=document.documentElement.scrollTop||document.body.scrollTop;
//得到页面被卷走的高度,即滚动条垂直坐标。注意兼容性。
var iSpeed=Math.floor(-scollTop/8);
//滚动速度。取整。
if(scollTop==0)
{
clearInterval(timer);
//当页面到达顶端了,清除定时器,否则不能下拉。
}
isScoll=true;
//设置系统滚动标记
document.documentElement.scrollTop=document.body.scrollTop=scollTop+iSpeed;
//滚动条向上滑动
},30);
};
};
</script>
<body>
jasdhskdhsldjak<br />
deahdkhsakldhasas<br />
fasdhuishdfuesahdfael<br />
jasdhskdhsldjak<br />
deahdkhsakldhasas<br />
fasdhuishdfuesahdfael<br />
jasdhskdhsldjak<br />
deahdkhsakldhasas<br />
fasdhuishdfuesahdfael<br />
jasdhskdhsldjak<br />
deahdkhsakldhasas<br />
fasdhuishdfuesahdfael<br />
jasdhskdhsldjak<br />
deahdkhsakldhasas<br />
fasdhuishdfuesahdfael<br />
jasdhskdhsldjak<br />
deahdkhsakldhasas<br />
fasdhuishdfuesahdfael<br />
jasdhskdhsldjak<br />
deahdkhsakldhasas<br />
fasdhuishdfuesahdfael<br />
jasdhskdhsldjak<br />
deahdkhsakldhasas<br />
fasdhuishdfuesahdfael<br />
jasdhskdhsldjak<br />
deahdkhsakldhasas<br />
fasdhuishdfuesahdfael<br />
jasdhskdhsldjak<br />
deahdkhsakldhasas<br />
fasdhuishdfuesahdfael<br />
jasdhskdhsldjak<br />
deahdkhsakldhasas<br />
fasdhuishdfuesahdfael<br />jasdhskdhsldjak<br />
deahdkhsakldhasas<br />
fasdhuishdfuesahdfael<br />jasdhskdhsldjak<br />
deahdkhsakldhasas<br />
fasdhuishdfuesahdfael<br />jasdhskdhsldjak<br />
deahdkhsakldhasas<br />
fasdhuishdfuesahdfael<br />jasdhskdhsldjak<br />
deahdkhsakldhasas<br />
fasdhuishdfuesahdfael<br />
<input type="button" id="btn1" value="回到顶部" />
</body>