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 相关文章推荐
js获取变量
Aug 24 Javascript
解读IE和firefox下JScript和HREF的执行顺序
Jan 12 Javascript
js和jquery设置disabled属性为true使按钮失效
Aug 07 Javascript
JavaScript 表单处理实现代码
Apr 13 Javascript
jQuery 弹出层插件(推荐)
May 24 Javascript
jQuery无缝轮播图代码
Dec 22 Javascript
React-router中结合webpack实现按需加载实例
May 25 Javascript
Vue中自定义全局组件的实现方法
Dec 08 Javascript
从零开始搭建一个react项目开发
Feb 09 Javascript
cocos2dx+lua实现橡皮擦功能
Dec 20 Javascript
js实现弹幕墙效果
Dec 10 Javascript
使用 JavaScript 制作页面效果
Apr 21 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
给多个地址发邮件的类
2006/10/09 PHP
PHP生成图像验证码的方法小结(2种方法)
2016/07/18 PHP
Centos7安装swoole扩展操作示例
2020/03/26 PHP
syntaxhighlighter 使用方法
2007/07/02 Javascript
Jquery拖拽并简单保存的实现代码
2010/11/28 Javascript
jQuery EasyUI API 中文文档 - Dialog对话框
2011/11/15 Javascript
面向对象Javascript核心支持代码分享
2012/05/23 Javascript
用JS提交参数创建form表单在FireFox中遇到的问题
2013/01/16 Javascript
怎么判断js脚本加载完成
2014/02/28 Javascript
Node.js和MongoDB实现简单日志分析系统
2015/04/25 Javascript
对于jQuery性能的一些优化建议
2015/08/13 Javascript
JS基于VML技术实现的五角星礼花效果代码
2015/10/26 Javascript
JavaScript中SetInterval与setTimeout的用法详解
2015/11/10 Javascript
JavaScript中解决多浏览器兼容性23个问题的快速解决方法
2016/05/19 Javascript
Jquery组件easyUi实现表单验证示例
2016/08/23 Javascript
jQuery实现滚动条滚动到子元素位置(方便定位)
2017/01/08 Javascript
vue插件draggable实现拖拽移动图片顺序
2018/12/01 Javascript
vue框架制作购物车小球动画效果实例代码
2019/09/26 Javascript
JS插件amCharts实现绘制柱形图默认显示数值功能示例
2019/11/26 Javascript
vue 通过 Prop 向子组件传递数据的实现方法
2020/10/30 Javascript
Pycharm2017版本设置启动时默认自动打开项目的方法
2018/10/29 Python
python实现小球弹跳效果
2019/05/10 Python
计算机二级python学习教程(2) python语言基本语法元素
2019/05/16 Python
Win10下Python3.7.3安装教程图解
2019/07/08 Python
Python + opencv对拍照得到的图片进行背景去除的实现方法
2020/11/18 Python
Python常用GUI框架原理解析汇总
2020/12/07 Python
python 通过exifread读取照片信息
2020/12/24 Python
几个Linux面试题笔试题
2016/08/01 面试题
个人担保书格式范文
2014/05/12 职场文书
导游词怎么写
2015/02/04 职场文书
2015年控辍保学工作总结
2015/05/18 职场文书
停发工资证明范本
2015/06/12 职场文书
2016年9月份红领巾广播稿
2015/12/21 职场文书
初三化学教学反思
2016/02/22 职场文书
Python中常见的导入方式总结
2021/05/06 Python
springboot @ConfigurationProperties和@PropertySource的区别
2021/06/11 Java/Android