Méthode JavaScript pour contrôler le défilement fluide des pages Web jusqu'à la position des compétences elements_javascript spécifiées

L'exemple de cet article décrit comment JavaScript contrôle le défilement fluide d'une page Web jusqu'à la position d'un élément spécifié. Partagez-le avec tout le monde pour votre référence. Les détails sont les suivants :

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

Comment utiliser :

ScrollToControl('elementID');

La page défilera en douceur jusqu'à l'emplacement de l'élément elementID

J'espère que cet article sera utile à la conception de la programmation JavaScript de chacun.