js 动画滚动到指定位置 ES6
### 开始 ###
写一个自动滚动过度到指定位置的一个函数 通过Class进行封装
/**
* 滚动动画过度
* @param {Object} position 定位(只支持Y轴)
* @param {Number} delay 单位毫秒 default 200
* @param {Number} speed 单位毫秒 default 10
* 误差:滚动距离越短误差越小
*/
export class AnimationScrollTop {
constructor (position, delay = 200, speed = 10) {
this.position = position
this.delay = delay
this.speed = speed
this.step = this.delay / this.speed
this.dimension = this.position.y / this.step
this.thisTop = window.pageYOffset
this.delayt = this.thisTop
this.upOrDown = this.thisTop > this.position.y
this.delays = null
// 初始化
this.init()
}
init () {
this.delays = setInterval(() => {
if (!this.upOrDown) {
if (this.delayt >= this.position.y) {
clearInterval(this.delays)
}
this.delayt += this.dimension
} else {
if (this.delayt <= this.position.y) {
clearInterval(this.delays)
}
this.delayt -= this.dimension
}
window.scrollTo(this.position.x, this.delayt)
}, this.speed)
}
}使用方式
new AnimationScrollTop({x: 0, y: 500})### END ###
js 动画滚动到指定位置 ES6的更多相关文章
- js 页面滚动到指定位置
当页面的长度比较长时,如果进行刷新页面,我们希望能够在刷新完成页面之后,能够停留在当前位置,而不是从头再手动滚动到当前位置. 那么这样的效果如何实现呢?下面开始简单描写(由于博客园不支持效果展示,所以 ...
- js滚动到指定位置
序言:在网络上百度,关键字:“js div滚动到指定位置”,结果基本上大同小异!各种大神都给我们总结出来了四种滚动到指定位置的办法,可惜再下愚钝,每个都不会用,所以写了一个超级简单的方法来使初学者一看 ...
- 利用jquery制作滚动到指定位置触发动画
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>利用 ...
- selenium webdriver——JS滚动到指定位置
1.DOM滚动方法 1.scrollIntoView(alignWithTop) 滚动浏览器窗口或容器元素,以便在当前视窗的可见范围看见当前元素.如果alignWithTop为true,或者省略它, ...
- js 获取滚动位置,滚动到指定位置,平滑滚动
1.获取当前滚动条位置信息 var top = dom.scrollTop; // 获取y轴上的滚动位置 var left = dom.scrollLeft; // 获取x轴上的滚动位置 2.滚动到指 ...
- 通过scrollTop,使子元素滚动至指定位置
想实现这样的一个功能,点击子元素,让元素滚动至指定位置,怎么实现呢? 在代码实现之前,先了解下相关关键点. 1.scrollHeight 属性 通过 scrollHeight 属性可获得子元素的滚动高 ...
- Vue如何引入jquery实现平滑滚动到指定位置效果
在以往的做法里首选jquery的animate实现,但是Vue里并没有这个方法.如何在Vue项目中实现点击导航平滑滚动到指定位置,为了这效果我是快要崩溃了,上网查阅了很久发现并没有真正意义上解决这个问 ...
- jquery滚动到指定位置
利用jquery实现页面可视区滚动到指定位置.直接上代码 //滚动到指定位置 function scrollTo(element,speed) { if(!speed){ speed = 300; } ...
- 自定义ScrollViewer的Touch事件--触摸上下移动ScrollViewer滚动到指定位置
double mPointY;//触摸点的Y坐标 double mOffsetY;//滚动条当前位置 bool mIsTouch = false;//是否触摸 //触摸事件 private void ...
随机推荐
- 从技术层面讲,如今的iPhone还能吊打其他手机吗?
自iPhone诞生之日起,他们就走了一条绝对精品主义路线,雍容华贵.价格高昂,十年帝国长盛不衰,其中,固然有乔布斯的粉丝文化和库克高超供应链管理的作用,但究其根本,还要回归到iPhone领先竞争对手一 ...
- mapper语句的一些问题,union连表查询和mapper中根据条件不同采用不同语句的查询问题
根据业务要求,不同表查出来的内容天需要一起展示出来,并且还有分页之类的,不同表查询字段也不完全相同,这样就有一个问题,不同表如何接合在一起,不同字段怎么办? 这个问题就需要用到union联合查询,并将 ...
- 072-PHP数组的交集和差集
<?php $arr1=array(1,3,4,5,34,78,99); //参加第一项竞赛的学生学号数组 $arr2=array(5,6,7,3,56,34,8,9); //参加第二项竞赛的学 ...
- yum 安装 Mysql error ERROR 1045 (28000): Access denied for user 'root'@'localhost' (using password: YES) 开启远程连接 修改登入密码 忘记root密码 配置防火墙规则 随手mark
yum 安装 MYsql: yum install mysql mysql-server mysql-devel -y 1.1 登入报错: ERROR 1045 (28000): Acc ...
- getClass兼容ie
if (!document.getElementsByClassName) { document.getElementsByClassName = function(className, elemen ...
- EUI库 - 9 - 数据集合 - 数组集合
ArrayCollection 当数组内的数据被修改了(增删改),组件能有效的获知 myCollection.addEventListener(eui.CollectionEvent.COLLE ...
- Python之日志处理(logging模块)转载
本人主要做一个知识的归类与记录,如是转载类文章,居首都会备注原链接,尊重原创者,谢谢! 此文转载原链接:https://www.cnblogs.com/yyds/p/6901864.html 本节内容 ...
- cf 621E. Wet Shark and Blocks
神奇,矩阵乘法23333333333333333 递推式是很简单的(连我这种不会DP的人都写出来了.) 需要求出的是转移矩阵(还是叫系数矩阵的),也是最这个东西用快速幂. 这个东西的i,j大概就表示从 ...
- LeetCode——39. 组合总和
给定一个无重复元素的数组 candidates 和一个目标数 target ,找出 candidates 中所有可以使数字和为 target 的组合. candidates 中的数字可以无限制重复被选 ...
- Android自定义View——实现字母导航栏
1.自定义View实现字母导航栏 2.ListView实现联系人列表 3.字母导航栏滑动事件处理 4.字母导航栏与中间字母的联动 5.字母导航栏与ListView的联动 1.先看主布局,方便后面代码的 ...