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 ...
随机推荐
- windows中的运行命令
首先按“开始”-“运行”,或按WIN键+R,进入『运行』窗口. 下面是常用的运行命令 (按英文字符顺序排列) appwize.cpl----添加.删除程序 access.cpl-----辅助功能选项 ...
- 说说我当初是如何学Linux的
今天我就说说我当初是如何从一名普通桌面维护工程师,通过学习和努力转成Linux运维工程师的,以及作为Linux运维工程师需要一些什么技能和知识,希望可以帮到一些对Linux有兴趣或者想往Linux这个 ...
- 法国:5G网络不会排除任何设备厂商
腾讯科技讯,据国外媒体报道,法国财政部长布鲁诺·勒梅尔(Bruno Le Maire)日前表示,法国有关 5G 电信网络的决定将基于网络的安全和性能,他强调说,法国政府不会将某一个特定的厂商排除在法国 ...
- dedecms调用当前栏目的子栏目及子栏目文章
{dede:channelartlist} <ul> {dede:arclist titlelen='60' row='8'} <img src=" ...
- UVA - 10570 Meeting with Aliens(外星人聚会)(暴力枚举)
题意:输入1~n的一个排列(3<=n<=500),每次可以交换两个整数.用最少的交换次数把排列变成1~n的一个环状序列. 分析:正序反序皆可.枚举每一个起点,求最少交换次数,取最小值. 求 ...
- C++ 编程学习(六) 函数
零.小知识点 1.函数返回类型可以是除数组外的自定义类型 一.传值调用 向函数传递参数的传值调用方法,把参数的实际值复制给函数的形式参数.在这种情况下,修改函数内的形式参数不会影响实际参数. 默认情况 ...
- Ubuntu 安装VirtualBox 虚拟机
转载 1.终端命令 编辑sources.list ? 1 sudo gedit /etc/apt/sources.list 2.添加 软件源 将下面的地址加入sources.list 的末尾,保存并退 ...
- 爬虫(十八):Scrapy框架(五) Scrapy通用爬虫
1. Scrapy通用爬虫 通过Scrapy,我们可以轻松地完成一个站点爬虫的编写.但如果抓取的站点量非常大,比如爬取各大媒体的新闻信息,多个Spider则可能包含很多重复代码. 如果我们将各个站点的 ...
- Flexslider插件实现图片轮播、文字图片相结合滑动切换效果
插件下载: 点击下载 密码: fbeg Flexslider具有以下特性: 支持滑动和淡入淡出效果. 支持水平.垂直方向滑动. 支持键盘方向键控制. 支持触控滑动. 支持图文混排,支持各种html元素 ...
- Activity LauchMode设置
lauchMode: standard: 标准模式,每次调用startActivity()方法就会产生一个新的实例. singleTop: 如果已经有一个实例位于Activit ...