JavaScript控制网页平滑滚动到指定元素位置的方法
编程学习 2021-07-04 21:47www.dzhlxh.cn编程入门
这篇文章主要介绍了JavaScript控制网页平滑滚动到指定元素位置的方法,实例分析了javascript操作页面滚动的技巧,非常具有实用价值,需要的朋友可以参考下
本文实例讲述了JavaScript控制网页平滑滚动到指定元素位置的方法。分享给大家供大家参考。具体如下：
function elementPosition(obj) {
var curleft = 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 };
}
function ScrollToControl(id)
{
var elem = document.getElementById(id);
var scrollPos = elementPosition(elem).y;
scrollPos = scrollPos - document.documentElement.scrollTop;
var remainder = scrollPos % 50;
var repeatTimes = (scrollPos - remainder) / 50;
ScrollSmoothly(scrollPos,repeatTimes);
window.scrollBy(0,remainder);
}
var repeatCount = 0;
var cTimeout;
var timeoutIntervals = new Array();
var timeoutIntervalSpeed;
function ScrollSmoothly(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程序设计有所帮助。