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


Posted in Javascript onApril 17, 2015

本文实例讲述了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 相关文章推荐
jquery基础教程之数组使用详解
Mar 10 Javascript
使用Node.js配合Nginx实现高负载网络
Jun 28 Javascript
jQuery在线选座位插件seat-charts特效代码分享
Aug 27 Javascript
微信小程序 安全包括(框架、功能模块、账户使用)详解
Jan 16 Javascript
详解支持Angular 2的表格控件
Jan 19 Javascript
JS实现禁止高频率连续点击的方法【基于ES6语法】
Apr 25 Javascript
React组件之间的通信的实例代码
Jun 27 Javascript
layui 监听表格复选框选中值的方法
Aug 15 Javascript
jQuery实现的页面弹幕效果【测试可用】
Aug 17 jQuery
vue实现多级菜单效果
Oct 19 Javascript
微信小程序点击item使之滚动到屏幕中间位置
Mar 25 Javascript
如何将JavaScript将数组转为树形结构
Jun 02 Javascript
原生js实现移动开发轮播图、相册滑动特效
Apr 17 #Javascript
JavaScript实现简单图片翻转的方法
Apr 17 #Javascript
JavaScript实现将xml转换成html table表格的方法
Apr 17 #Javascript
JavaScript实现的简单幂函数实例
Apr 17 #Javascript
js面向对象之公有、私有、静态属性和方法详解
Apr 17 #Javascript
jQuery中toggle()函数的使用实例
Apr 17 #Javascript
JQuery实现可直接编辑的表格
Apr 16 #Javascript
You might like
PHP入门速成(2)
2006/10/09 PHP
PHP 木马攻击防御技巧
2009/06/13 PHP
ThinkPHP中RBAC类的四种用法分析
2014/11/24 PHP
Symfony2安装的方法(2种方法)
2016/02/04 PHP
php 策略模式原理与应用深入理解
2019/09/25 PHP
JQuery UI皮肤定制
2009/07/27 Javascript
jquery实现简单易懂的图片展示小例子
2013/11/21 Javascript
使用JavaScript链式编程实现模拟Jquery函数
2014/12/21 Javascript
JavaScript比较两个对象是否相等的方法
2015/02/06 Javascript
浅谈jQuery构造函数分析
2015/05/11 Javascript
jQuery on()方法绑定动态元素的点击事件实例代码浅析
2016/06/16 Javascript
超详细的JS弹出窗口代码大全
2020/04/18 Javascript
jQuery的ready方法实现原理分析
2016/10/26 Javascript
jQuery动态产生select option下拉列表
2017/03/15 Javascript
基于IView中on-change属性的使用详解
2018/03/15 Javascript
在vue项目中引用Iview的方法
2018/09/14 Javascript
KOA+egg.js集成kafka消息队列的示例
2018/11/09 Javascript
浅谈element中InfiniteScroll按需引入的一点注意事项
2020/06/05 Javascript
Vue-cli 移动端布局和动画使用详解
2020/08/10 Javascript
仅用500行Python代码实现一个英文解析器的教程
2015/04/02 Python
Python中为什么要用self探讨
2015/04/14 Python
Python基于二分查找实现求整数平方根的方法
2016/05/12 Python
Python如何获取系统iops示例代码
2016/09/06 Python
Python学习笔记之While循环用法分析
2019/08/14 Python
django admin 根据choice字段选择的不同来显示不同的页面方式
2020/05/13 Python
Python代码覆盖率统计工具coverage.py用法详解
2020/11/25 Python
CSS3 Flexbox中flex-shrink属性的用法示例介绍
2013/12/30 HTML / CSS
带有css3动画效果的兼容多浏览器简单导航条示例
2014/01/26 HTML / CSS
CSS3之2D与3D变换的实现方法
2019/01/28 HTML / CSS
好药师网上药店:安全合法的网上药品零售药房
2017/02/15 全球购物
英国手工布艺沙发在线购买:Sofas & Stuff
2018/03/02 全球购物
学生实习推荐信范文
2013/11/26 职场文书
秋天的雨教学反思
2014/04/27 职场文书
省级优秀班集体申报材料
2014/05/25 职场文书
2014年个人工作总结范文
2014/11/07 职场文书
关于Nginx中虚拟主机的一些冷门知识小结
2022/03/03 Servers