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程序设计有所帮助。