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

本文实例讲述了JavaScript控制网页平滑滚动到指定元素位置的方法分享给大家供大家参考。具体如下:

rush:js;"> 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); }

使用方法

rush:js;"> ScrollToControl('elementID');

页面将会平滑的滚动到元素elementID所在的位置

希望本文所述对大家的javascript程序设计有所帮助。

相关文章

前言 做过web项目开发的人对layer弹层组件肯定不陌生,作为l...
前言 前端表单校验是过滤无效数据、假数据、有毒数据的第一步...
前言 图片上传是web项目常见的需求,我基于之前的博客的代码...
前言 导出Excel文件这个功能,通常都是在后端实现返回前端一...
前言 众所周知,js是单线程的,从上往下,从左往右依次执行,...
前言 项目开发中,我们可能会碰到这样的需求:select标签,禁...