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 ...
随机推荐
- springcloud--ribbo(负载均衡)
ribbo:是Netflix公司开源的一个负载均衡的项目,是一个客户端负载均衡器,运行在客户端上. 实际运用案例(基于springcloud入门案例): 一.新建Module:springcloud- ...
- 如何创建一个Asp .Net Web Api项目
1.点击文件=>新建=>项目 2.创建一个Asp .NET Web项目 3.选择Empty,然后选中下面的MVC和Web Api,也可以直接选择Web Api选项,注意将身份验证设置为无身 ...
- 103-PHP定义一个类
<?php class ren{ //定义人类 } class mao{ //定义猫类 } new ren(); //实例化人类 new mao(); //实例化猫类 new mao(); // ...
- Golang modules包依赖管理工具
初始化 执行go mod init module-name,其中module-name为包名字,执行完后会生成go.mod文件,如下 module module-name go 1.13 包管理 使 ...
- Maven的安装和创建项目的过程
一.下载Maven包和配置环境变量 1.将下载好的maven包放到一个目录中:目录中不能有汉字和空格 2.配置环境变量 3.配置path路径 二.配置阿里云私服 1.找到setting目录,配置下载j ...
- Java文件处理之IO流
一.概述 流:代表任何有能力产出数据的数据源对象或者是有能力接受数据的接收端对象 :其作用是为数据源和目的地建立一个输送通道. IO流:是程序中一套用于数据传输的机制.IO流是Input流和Outpu ...
- 学习spring的第4天
关于老式的spring+mybatis整合,使用了druid连接池,还使用了mybatis-spring依赖(用于整合的),但是这个依赖本身就使用了spring-jdbc的某些类来处理事务方面的内容, ...
- 【Android】家庭记账本手机版开发报告二
一.说在前面 昨天 完成了对记账本的账单的增删 今天 完善昨天的框架结构( 1.引入ViewModel管理数据.使MainActive 只管理界面.不再管数据了 2.引入AsyncTask.后台执行. ...
- java反射的学习
1.类的 类类型(ClassType) 类的类类型可以用来做很多事,我们可以通过它获取到类的名称,类的路径,类的成员变量,类的方法等等,还可以通过它获得类的实例化对象. 我们可以通过 类名.class ...
- 【LeetCode】最长回文子串-中心扩展法
[问题]给定一个字符串 s,找到 s 中最长的回文子串.你可以假设 s 的最大长度为 1000. 示例 : 输入: "babad" 输出: "bab" 注意: ...