### 开始 ###

写一个自动滚动过度到指定位置的一个函数 通过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的更多相关文章

  1. js 页面滚动到指定位置

    当页面的长度比较长时,如果进行刷新页面,我们希望能够在刷新完成页面之后,能够停留在当前位置,而不是从头再手动滚动到当前位置. 那么这样的效果如何实现呢?下面开始简单描写(由于博客园不支持效果展示,所以 ...

  2. js滚动到指定位置

    序言:在网络上百度,关键字:“js div滚动到指定位置”,结果基本上大同小异!各种大神都给我们总结出来了四种滚动到指定位置的办法,可惜再下愚钝,每个都不会用,所以写了一个超级简单的方法来使初学者一看 ...

  3. 利用jquery制作滚动到指定位置触发动画

    <!DOCTYPE html><html><head> <meta charset="utf-8"> <title>利用 ...

  4. selenium webdriver——JS滚动到指定位置

    1.DOM滚动方法 1.scrollIntoView(alignWithTop)  滚动浏览器窗口或容器元素,以便在当前视窗的可见范围看见当前元素.如果alignWithTop为true,或者省略它, ...

  5. js 获取滚动位置,滚动到指定位置,平滑滚动

    1.获取当前滚动条位置信息 var top = dom.scrollTop; // 获取y轴上的滚动位置 var left = dom.scrollLeft; // 获取x轴上的滚动位置 2.滚动到指 ...

  6. 通过scrollTop,使子元素滚动至指定位置

    想实现这样的一个功能,点击子元素,让元素滚动至指定位置,怎么实现呢? 在代码实现之前,先了解下相关关键点. 1.scrollHeight 属性 通过 scrollHeight 属性可获得子元素的滚动高 ...

  7. Vue如何引入jquery实现平滑滚动到指定位置效果

    在以往的做法里首选jquery的animate实现,但是Vue里并没有这个方法.如何在Vue项目中实现点击导航平滑滚动到指定位置,为了这效果我是快要崩溃了,上网查阅了很久发现并没有真正意义上解决这个问 ...

  8. jquery滚动到指定位置

    利用jquery实现页面可视区滚动到指定位置.直接上代码 //滚动到指定位置 function scrollTo(element,speed) { if(!speed){ speed = 300; } ...

  9. 自定义ScrollViewer的Touch事件--触摸上下移动ScrollViewer滚动到指定位置

    double mPointY;//触摸点的Y坐标 double mOffsetY;//滚动条当前位置 bool mIsTouch = false;//是否触摸 //触摸事件 private void ...

随机推荐

  1. UVA - 1600 Patrol Robot (巡逻机器人)(bfs)

    题意:从(1,1)走到(m,n),最多能连续穿越k个障碍,求最短路. 分析:obstacle队列记录当前点所穿越的障碍数,如果小于k可继续穿越障碍,否则不能,bfs即可. #pragma commen ...

  2. 洛谷 P2049 魔术棋子(vector)

    题目传送门 解题思路: 用一个vector维护每一个点都可以乘出哪些数来,然后将(n,m)的所有数从小到大输出即可. 要用一个bool ff[j][k]来维护当前这个点(i,j)里面有没有被放过k,以 ...

  3. 131-PHP子类可以访问父类public修饰的类成员

    <?php class father{ //定义father类 public function cook(){ return '烹饪'; } } class son extends father ...

  4. 062-PHP函数按值传参,交换数值函数

    <?php function swap($x,$y){ //定义交换数值函数 $temp=$x; $x=$y; $y=$temp; } $m=5; $n=15; echo "交换前:& ...

  5. CSU 1126 DFS前缀和

    在一棵树上找影响最小的某个点,某个点的影响是等于其他点到他的距离*其他点的权值 的和 我一开始也找不到什么好的方法,只能想到每个点暴力去判断,但是这样肯定会超时(10^5个点),又有点想用类似前缀和, ...

  6. 5分钟搞懂:session与cookie

    http是无状态协议 无状态协议的意思是服务端与客户端不会记录任何一次通信的信息.诺兰有一部电影<记忆碎片>,说的是一个有"短期记忆丧失症"的人根据自己支离破碎的记忆来 ...

  7. kafka源码系列之mysql数据增量同步到kafka

    一,架构介绍 生产中由于历史原因web后端,mysql集群,kafka集群(或者其它消息队列)会存在一下三种结构. 1,数据先入mysql集群,再入kafka 数据入mysql集群是不可更改的,如何再 ...

  8. Selenium2Library:Get Matching Xpath Count用法

    Name:Get Matching Xpath CountSource:Selenium2Library <test library>Arguments:[ xpath ]Returns ...

  9. UVA - 11054 Wine trading in Gergovia (Gergovia 的酒交易)(贪心+模拟)

    题意:直线上有n(2<=n<=100000)个等距的村庄,每个村庄要么买酒,要么卖酒.设第i个村庄对酒的需求为ai(-1000<=ai<=1000),其中ai>0表示买酒 ...

  10. C++ opencv 数字识别

    #include "cv.h" #include "highgui.h" #include "cxcore.h" #include < ...