JavaScript method for controlling smooth webpage scrolling to the specified element position _ javascript tips-js tutorial

This article mainly introduces how JavaScript controls the smooth scrolling of webpages to the specified Element location. The example analyzes the javascript Page scrolling technique, which is of great practical value, for more information about how to control the smooth scrolling of a webpage to a specified element, see the example in this article. Share it with you for your reference. The details are as follows:

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);}

Usage:

ScrollToControl('elementID');

The page will smoothly scroll to the location where element elementID is located.

I hope this article will help you design javascript programs.