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类定义原型方法的两种实现的区别评论很多
Sep 12 Javascript
JavaScript使用技巧精萃[代码非常实用]
Nov 21 Javascript
JavaScript Object的extend是一个常用的功能
Dec 02 Javascript
jQuery EasyUI API 中文文档 - Draggable 可拖拽
Sep 29 Javascript
简单的Jquery全选功能
Nov 07 Javascript
js 动态加载事件的几种方法总结
Dec 25 Javascript
js实现简洁大方的二级下拉菜单效果代码
Sep 01 Javascript
浅谈js函数的多种定义方法与区别
Nov 29 Javascript
jQuery插件实现的日历功能示例【附源码下载】
Sep 07 jQuery
vue.js 双层嵌套for遍历的方法详解, 类似php foreach()
Sep 07 Javascript
pm2发布node配置文件ecosystem.json详解
May 15 Javascript
JS实现炫酷轮播图
Nov 15 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 mysql与mysqli事务使用说明 分享
2013/08/17 PHP
使用PHP生成图片的缩略图的方法
2015/08/18 PHP
fsockopen pfsockopen函数被禁用,SMTP发送邮件不正常的解决方法
2015/09/20 PHP
Laravel Validator 实现两个或多个字段联合索引唯一
2019/05/08 PHP
显示js对象所有属性和方法的函数
2009/10/16 Javascript
防止页面被iframe(兼容IE,Firefox火狐)
2010/07/04 Javascript
对js关键字命名的疑问介绍
2014/04/25 Javascript
关于Javascript 对象(object)的prototype
2014/05/09 Javascript
jQuery实现的产品自动360度旋转展示特效源码分享
2015/08/21 Javascript
js学习笔记之事件处理模型
2016/10/31 Javascript
Vue.js实现简单动态数据处理
2017/02/13 Javascript
Bootstrap下拉菜单Dropdowns的实现代码
2017/03/17 Javascript
使用js获取伪元素的content实例
2017/10/24 Javascript
vue中使用better-scroll实现滑动效果及注意事项
2018/11/15 Javascript
Echarts地图添加引导线效果(labelLine)
2019/09/30 Javascript
JavaScript实现模态对话框实例
2020/01/13 Javascript
vue 图片裁剪上传组件的实现
2020/11/12 Javascript
python数据结构之二叉树的建立实例
2014/04/29 Python
Python通过DOM和SAX方式解析XML的应用实例分享
2015/11/16 Python
Python编程实现双链表,栈,队列及二叉树的方法示例
2017/11/01 Python
Python爬虫获取整个站点中的所有外部链接代码示例
2017/12/26 Python
Python pymongo模块用法示例
2018/03/31 Python
Python基础之函数的定义与使用示例
2019/03/23 Python
Python3利用print输出带颜色的彩色字体示例代码
2019/04/08 Python
python实现银行管理系统
2019/10/25 Python
python3.6连接mysql数据库及增删改查操作详解
2020/02/10 Python
python环境下安装opencv库的方法
2020/03/05 Python
opencv中图像叠加/图像融合/按位操作的实现
2020/04/01 Python
在Ubuntu中安装并配置Pycharm教程的实现方法
2021/01/06 Python
一些Unix笔试题和面试题
2012/09/25 面试题
九年级科学教学反思
2014/01/29 职场文书
优秀技术工人先进材料
2014/02/17 职场文书
党课主持词大全
2015/06/30 职场文书
2016年党风廉政建设承诺书
2016/03/25 职场文书
html css3不拉伸图片显示效果
2021/06/07 HTML / CSS
学习nginx基础知识
2021/09/04 Servers