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 相关文章推荐
json 实例详细说明教程
Oct 31 Javascript
javascript仿php的print_r函数输出json数据
Sep 13 Javascript
使用mini-define实现前端代码的模块化管理
Dec 25 Javascript
jQuery获得指定元素坐标的方法
Apr 14 Javascript
JavaScript数据操作_浅谈原始值和引用值的操作本质
Aug 23 Javascript
JS调用Android、Ios原生控件
Jan 06 Javascript
jQuery插件echarts实现的去掉X轴、Y轴和网格线效果示例【附demo源码下载】
Mar 04 Javascript
详解require.js配置路径的用法和css的引入
Sep 06 Javascript
从零开始搭建vue移动端项目到上线的步骤
Oct 15 Javascript
js canvas画布实现高斯模糊效果
Nov 27 Javascript
element-ui 本地化使用教程详解
Oct 28 Javascript
vue实现简易计算器功能
Jan 20 Vue.js
原生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
PHP4中实现动态代理
2006/10/09 PHP
php的urlencode()URL编码函数浅析
2011/08/09 PHP
YII框架实现自定义第三方扩展操作示例
2019/04/26 PHP
PHP设计模式入门之迭代器模式原理与实现方法分析
2020/04/26 PHP
jQuery get和post 方法传值注意事项
2009/11/03 Javascript
javascript:void(0)使用探讨
2013/08/27 Javascript
javascript使用location.search的示例
2013/11/05 Javascript
简单的Jquery全选功能
2013/11/07 Javascript
手写的一个兼容各种浏览器的javascript getStyle函数(获取元素的样式)
2014/06/06 Javascript
基于NodeJS的前后端分离的思考与实践(四)安全问题解决方案
2014/09/26 NodeJs
浅谈javascript 迭代方法
2015/01/21 Javascript
js通过iframe加载外部网页的实现代码
2015/04/05 Javascript
js和jquery实现监听键盘事件示例代码
2020/06/24 Javascript
原生js封装的一些jquery方法(详解)
2016/09/20 Javascript
微信小程序实战之顶部导航栏(选项卡)(1)
2020/06/19 Javascript
JS实现商品筛选功能
2020/08/19 Javascript
vue实现nav导航栏的方法
2017/12/13 Javascript
vue2.0父子组件间传递数据的方法
2018/08/16 Javascript
layDate日期控件使用方法详解
2018/11/15 Javascript
JS插入排序简单理解与实现方法分析
2019/11/25 Javascript
js回到页面指定位置的三种方式
2020/12/17 Javascript
[00:27]DOTA2战队VP、Secret贺新春
2018/02/11 DOTA
python实现通过shelve修改对象实例
2014/09/26 Python
Python实现将SQLite中的数据直接输出为CVS的方法示例
2017/07/13 Python
Python快速排序算法实例分析
2017/11/29 Python
Django添加KindEditor富文本编辑器的使用
2018/10/24 Python
python中退出多层循环的方法
2018/11/27 Python
PyQt5的安装配置过程,将ui文件转为py文件后显示窗口的实例
2019/06/19 Python
使用pip安装python库的多种方式
2019/07/31 Python
Python简单实现词云图代码及步骤解析
2020/06/04 Python
关于box-sizing的全面理解
2016/07/28 HTML / CSS
总经理岗位职责
2013/11/09 职场文书
教师节商场活动方案
2014/02/13 职场文书
2014年学校总务处工作总结
2014/12/08 职场文书
优秀乡村医生事迹材料(2016精选版)
2016/02/29 职场文书
关于flex 上下文中自动 margin的问题(完整例子)
2021/05/20 HTML / CSS