首页 > 编程 > JavaScript > 正文

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

2019-11-20 12:38:41
字体:
来源:转载
供稿:网友

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

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表