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 ...
随机推荐
- HDU - 1698 Just a Hook (线段树---区间修改)
题意:n个棍子,初始值全为1,给定Q个区间,分别赋值,问n个棍子的总值. 分析:lazy标记主要体现在update上. 当l <= L && R <= r时,该结点的子结点 ...
- Arduino nano的bootloader文件烧录
1.买了了nano还没用就用 avrisp烧录器给烧了其他程序,仅仅是的avr单片机了:2.将他恢复成Arduino nano吧. 在Arduino软件安装目录中的hardware\arduino中. ...
- pl/sql远程连接oracle数据库乱码
1. --在PLSQL Developer中查询select userenv('language') from dual ; 我的查询结果为:AMERICAN_AMERICA.ZHS16GBK 2.新 ...
- Emacs: 设置窗口标题格式
Emacs默认的窗口标题常常比较简单,例如我的默认标题是"emacs@ubuntu".如果想要在标题中显示更多的信息,我们可以对它进行一些设置.由于Emacs的可扩展性,这种修改实 ...
- 七十七、SAP中数据库操作之多表联合查询
一.我们看一下SFLIGHT表和SPFLI表,表结构如下 二.这2个表的数据如下 三.我们代码如下 四.多表联合查询结果如下
- HDU_4939 stupid tower defense 2014多校7 多变量型DP
意思是有个塔防游戏,有三种塔,红塔在怪物经过的时候每秒会产生攻击力大小的伤害,绿塔对怪物经过以及经过之后每秒产生攻击力大小的伤害,还有种蓝塔,对怪物进行减速,即怪物从此之后经过一个单位都会减慢c秒 最 ...
- Flink 容错机制与状态
简介 Apache Flink提供了一种容错机制,可以持续恢复数据流应用程序的状态. 该机制确保即使出现故障,经过恢复,程序的状态也会回到以前的状态. Flink 主持 at least once 语 ...
- 逆向-PE重定位表
重定位表 当链接器生成一个PE文件时,会假设这个文件在执行时被装载到默认的基地址处(基地址+RVA就是VA).并把code和data的相关地址写入PE文件.如果像EXE一样首先加载就是它image ...
- UVA - 12186 Another Crisis(工人的请愿书)(树形dp)
题意:某公司有1个老板和n(n<=105)个员工组成树状结构,除了老板之外每个员工都有唯一的直属上司.老板的编号为0,员工编号为1~n.无下属的员工(叶子)打算签署一项请愿书递给老板,但不能跨级 ...
- AndroidAutoLayout
AndroidAutoLayout [DEPRECATED]Android屏幕适配方案,直接填写设计图上的像素尺寸即可完成适配. 目前没有精力,已停止维护,使用前务必看明白代码,明确该方案可以解决自身 ...