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提示 &quot;object expected&quot;的解决方法
Dec 13 Javascript
JavaScript中SQL语句的应用实现
May 04 Javascript
javascript制作的网页侧边弹出框思路及实现代码
May 21 Javascript
在Node.js中实现文件复制的方法和实例
Jun 05 Javascript
嵌入式iframe子页面与父页面js通信的方法
Jan 20 Javascript
javascript实现检验的各种规则
Jul 31 Javascript
详解JavaScript模块化开发
Dec 04 Javascript
JS经典正则表达式笔试题汇总
Dec 15 Javascript
详解Angular 开发环境搭建
Jun 22 Javascript
代码详解javascript模块加载器
Mar 04 Javascript
JavaScript中的垃圾回收与内存泄漏示例详解
May 02 Javascript
JavaScript 判断数据类型的4种方法
Sep 11 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
超级实用的7个PHP代码片段分享
2012/01/05 PHP
php计算数组不为空元素个数的方法
2014/01/27 PHP
PHP实现Huffman编码/解码的示例代码
2018/04/20 PHP
jQuery 过滤not()与filter()实例代码
2012/05/10 Javascript
JavaScript语言核心数据类型和变量使用介绍
2013/08/23 Javascript
利用毫秒减值计算时长的js代码
2013/09/22 Javascript
JavaScript知识点总结(十六)之Javascript闭包(Closure)代码详解
2016/05/31 Javascript
JavaScript DOM节点操作方法总结
2016/08/23 Javascript
JavaScript 判断一个对象{}是否为空对象的简单方法
2016/10/09 Javascript
js 获取今天以及过去日期
2017/04/11 Javascript
JavaScript之underscore_动力节点Java学院整理
2017/07/03 Javascript
extjs简介_动力节点Java学院整理
2017/07/17 Javascript
使用Nuxt.js改造已有项目的方法
2018/08/07 Javascript
总结4个方面优化Vue项目
2019/02/11 Javascript
[00:34]DOTA2上海特级锦标赛 Spirit战队宣传片
2016/03/04 DOTA
python实现在pickling的时候压缩的方法
2014/09/25 Python
Python基于DES算法加密解密实例
2015/06/03 Python
关于python字符串方法分类详解
2019/08/20 Python
python实现超市管理系统(后台管理)
2019/10/25 Python
解决Jupyter Notebook使用parser.parse_args出现错误问题
2020/04/20 Python
购买瑞典当代设计的腕表和太阳眼镜:TRIWA
2016/10/30 全球购物
Abe’s of Maine:自1979以来销售相机和电子产品
2016/11/21 全球购物
Shein英国:女性时尚网上商店
2019/04/10 全球购物
天游软件面试
2013/11/23 面试题
企业演讲稿范文大全
2014/05/20 职场文书
共产党员岗位承诺书
2014/05/29 职场文书
大学生应聘导游自荐信
2014/06/02 职场文书
报名委托书
2015/01/29 职场文书
世界地球日活动总结
2015/02/09 职场文书
监守自盗观后感
2015/06/10 职场文书
2016年教师节贺卡寄语
2015/12/04 职场文书
敬业奉献模范事迹材料(2016精选版)
2016/02/26 职场文书
在 Golang 中实现 Cache::remember 方法详解
2021/03/30 Python
Nginx的rewrite模块详解
2021/03/31 Servers
Java面试题冲刺第十九天--数据库(4)
2021/08/07 Java/Android
Jmerte 分布式压测及分布式压测配置
2022/04/30 Java/Android