手机
当前位置:查字典教程网 >编程开发 >Javascript教程 >JavaScript控制网页平滑滚动到指定元素位置的方法
JavaScript控制网页平滑滚动到指定元素位置的方法
摘要:本文实例讲述了JavaScript控制网页平滑滚动到指定元素位置的方法。分享给大家供大家参考。具体如下:functionelementPos...

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

【JavaScript控制网页平滑滚动到指定元素位置的方法】相关文章:

js控制网页前进和后退的方法

JavaScript中用于生成随机数的Math.random()方法

JavaScript实现鼠标滑过处生成气泡的方法

用JavaScript实现页面重定向功能的教程

javascript无刷新评论实现方法

JavaScript获取并更改input标签name属性的方法

简述JavaScript中正则表达式的使用方法

JavaScript中length属性的使用方法

JavaScript数组去重的3种方法和代码实例

jquery控制表单输入框显示默认值的方法

精品推荐
分类导航