JavaScript控制网页平滑滚动到指定元素位置的方法
本文实例讲述了JavaScript控制网页平滑滚动到指定元素位置的方法。分享给大家供大家参考。具体如下：
functionelementPosition(obj){
varcurleft=0,curtop=0;
if(obj.offsetParent){
curleft=obj.offsetLeft;
curtop=obj.offsetTop;
while(obj=obj.offsetParent){
curleft+=obj.offsetLeft;
curtop+=obj.offsetTop;
}
}
return{x:curleft,y:curtop};
}
functionScrollToControl(id)
{
varelem=document.getElementById(id);
varscrollPos=elementPosition(elem).y;
scrollPos=scrollPos-document.documentElement.scrollTop;
varremainder=scrollPos%50;
varrepeatTimes=(scrollPos-remainder)/50;
ScrollSmoothly(scrollPos,repeatTimes);
window.scrollBy(0,remainder);
}
varrepeatCount=0;
varcTimeout;
vartimeoutIntervals=newArray();
vartimeoutIntervalSpeed;
functionScrollSmoothly(scrollPos,repeatTimes)
{
if(repeatCount<repeatTimes)
{
window.scrollBy(0,50);
}
else
{
repeatCount=0;
clearTimeout(cTimeout);
return;
}
repeatCount++;
cTimeout=setTimeout("ScrollSmoothly('"+scrollPos+"','"+repeatTimes+"')",10);
}
使用方法：
ScrollToControl('elementID');
页面将会平滑的滚动到元素elementID所在的位置
希望本文所述对大家的javascript程序设计有所帮助。
热门推荐
3 祝福语简短的微信
10 幼儿祝福语大全简短贺卡
11 感谢教官文案祝福语简短
12 鼠年同事祝福语简短创意
13 元旦祝福语 简短独特群发
14 妈咪跟我生日祝福语简短
15 给儿子新婚祝福语简短
16 伴娘祝福语长文案简短
17 恭喜高考完祝福语简短
18 生日祝福语送老公简短