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 相关文章推荐
从sohu弄下来的flash中展示图片的代码
Apr 27 Javascript
JavaScript入门教程(7) History历史对象
Jan 31 Javascript
JQuery 选择器 xpath 语法应用
May 13 Javascript
Jquery同辈元素选中/未选中效果的实例代码
Aug 01 Javascript
js setTimeout 常见问题小结
Aug 13 Javascript
Jquery实现图片放大镜效果的思路及代码(自写)
Oct 18 Javascript
javascript中AJAX用法实例分析
Jan 30 Javascript
Node.js实现Excel转JSON
Apr 24 Javascript
js判断主流浏览器类型和版本号的简单实现代码
May 26 Javascript
Angularjs中使用指令绑定点击事件的方法
Mar 30 Javascript
Vue中使用matomo进行访问流量统计的实现
Nov 05 Javascript
node.JS路径解析之PATH模块使用方法详解
Feb 06 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中使用DOM类读取XML文件的实现代码
2011/12/14 PHP
PHP cdata 处理(详细介绍)
2013/07/05 PHP
PHP与MYSQL中UTF8 中文排序示例代码
2014/10/23 PHP
CI框架中site_url()和base_url()的区别
2015/01/07 PHP
php插入排序法实现数组排序实例
2015/02/16 PHP
PHP设计模式之简单投诉页面实例
2016/02/24 PHP
php使用pclzip类实现文件压缩的方法(附pclzip类下载地址)
2016/04/30 PHP
php支持断点续传、分块下载的类
2016/05/02 PHP
Linux环境下php实现给网站截图的方法
2016/05/03 PHP
PHP基于双向链表与排序操作实现的会员排名功能示例
2017/12/26 PHP
JavaScript 学习初步 入门教程
2010/03/25 Javascript
JS对象转换为Jquery对象实现代码
2013/12/29 Javascript
js 获取input点选按钮的值的方法
2014/04/14 Javascript
nodejs分页类代码分享
2014/06/17 NodeJs
Javascript常用字符串判断函数代码分享
2014/12/08 Javascript
关于RequireJS的简单介绍即使用方法
2016/10/20 Javascript
Omi v1.0.2发布正式支持传递javascript表达式
2017/03/21 Javascript
详解Eslint 配置及规则说明
2018/09/10 Javascript
pm2发布node配置文件ecosystem.json详解
2019/05/15 Javascript
[01:48]DOTA2 2015国际邀请赛中国区预选赛第二日战报
2015/05/27 DOTA
[46:37]LGD vs TNC 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
python实现读取命令行参数的方法
2015/05/22 Python
Python利用Beautiful Soup模块搜索内容详解
2017/03/29 Python
python逆向入门教程
2018/01/15 Python
Python基于socket实现简单的即时通讯功能示例
2018/01/16 Python
python画图--输出指定像素点的颜色值方法
2019/07/03 Python
python中的&amp;&amp;及||的实现示例
2019/08/07 Python
python获取指定日期范围内的每一天,每个月,每季度的方法
2019/08/08 Python
python 哈希表实现简单python字典代码实例
2019/09/27 Python
美国高端医师级美容产品电商:BeautifiedYou.com
2017/04/17 全球购物
澳大利亚最便宜的网上药房:Chemist Warehouse
2020/01/30 全球购物
幼儿园长自我鉴定
2013/10/17 职场文书
爱情保证书范文
2014/02/01 职场文书
县委务虚会发言材料
2014/10/20 职场文书
Spring Boot 实现敏感词及特殊字符过滤处理
2021/06/29 Java/Android
Nginx代理Redis哨兵主从配置的实现
2022/07/15 Servers