i want to have my page scroll to a position smoothly, i use javascript scrollIntoView method to provide scrolling for the page, but it moves suddenly. i want the user to keep trace of where she/he is scrolling.
thanks in advance
i want to have my page scroll to a position smoothly, i use javascript scrollIntoView method to provide scrolling for the page, but it moves suddenly. i want the user to keep trace of where she/he is scrolling.
thanks in advance
i search for a ready script for smooth scrolling but i couldnt find any. So i did it myself as follows, it works perfectly
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);
}
example usage :
ScrollToControl('elementID');
it moves to the control smoothly;
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.