A5下载 - 努力做内容最丰富最安全的下载站!

A5站长下载站

当前位置:A5下载 > 编程开发 > 网站开发 > JavaScript控制网页平滑滚动到指定元素位置的方法

JavaScript控制网页平滑滚动到指定元素位置的方法

时间:2015-04-17 11:03作者:zhao人气:128

本文实例讲述了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程序设计有所帮助。

标签JavaScript,控制,网页,平滑,滚动,指定,元素,位

相关下载

查看所有评论+

网友评论

网友
您的评论需要经过审核才能显示

公众号