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 ...
 
随机推荐
- laravel.01.一些细节
			
0:参考1,参考2,参考3,参考4,参考5 1.读取项目的配置文件内容,比如app.php下的name属性,用config('app.name','default-value'); 2.读取.ENV文 ...
 - Vulkan SDK 之 Shaders
			
Compiling GLSL Shaders into SPIR-V 1.SPIR-V 是vulkan的底层shader语言.GLSL可以通过相关接口转换为SPIR-V. Creating Vulka ...
 - 15.swoole学习笔记--异步写入文件
			
<?php //异步写入文件 $content="hello world"; swoole_async_writefile('2.txt',$content,function ...
 - Codeforces Round #616 (Div. 2)
			
地址:http://codeforces.com/contest/1291 A题就不写解析了,就是给一个数,是不是本身满足这个条件或者删除某些数字来达到这个条件:奇数,各个位上的数字加起来是偶数. # ...
 - P1013 数素数
			
转跳点:
 - 【Android】家庭记账本手机版开发报告一
			
一.说在前面 昨天 学习了数据库的一些简单操作 今天 使用数据库,完成对记账本的账单记录的增删 问题 没有 二.数据库 1.账单表的结构 (注 id:账单的唯一标识,uid:记录账单的用户的id,co ...
 - 2016蓝桥杯省赛C/C++A组第九题 密码脱落
			
题意: X星球的考古学家发现了一批古代留下来的密码. 这些密码是由A.B.C.D 四种植物的种子串成的序列. 仔细分析发现,这些密码串当初应该是前后对称的(也就是我们说的镜像串). 由于年代久远,其中 ...
 - C++基础--虚函数和纯虚函数
			
虚函数的一种重要的应用是在子类重写父类方法上,一般都是在父类中声明的时候用关键字virtual修饰. 在C++中,一个父类的对象指针是可以指向子类的实例化对象,这个时候可以用该对象指针来访问父类的成员 ...
 - Android Studio Madual作为application的使用以及工作空间和modual的区别
			
Android Studio Madual作为application的使用以及工作空间和modual的区别 前言: 写这篇文章的目的是因为自己使用Android Studio开发时进入了一个误区,后面 ...
 - 爬虫(十八):Scrapy框架(五) Scrapy通用爬虫
			
1. Scrapy通用爬虫 通过Scrapy,我们可以轻松地完成一个站点爬虫的编写.但如果抓取的站点量非常大,比如爬取各大媒体的新闻信息,多个Spider则可能包含很多重复代码. 如果我们将各个站点的 ...