### 开始 ###

写一个自动滚动过度到指定位置的一个函数 通过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. Asp.net mvc项目分页功能

    1.定义一个分页用的Page<T>类 /* 使用示例: var pager = new Pager<Article>( this.ControllerContext, //上下 ...

  2. 我的Java语言学习日志1_"简单的银行管理系统实现"

    设计步骤:注意:本篇代码,直接建两个类( Bank_Account.BankManage)在BankManage往里面填方法就行.是为了让和我一样自学朋友可以更快的接受.但是代码优化的空间还是很大的( ...

  3. oracle学习笔记(4)

    4.oracle数据库的启动流程 windows操作系统 启动监听: lsnrctl start; 启动数据库实例:oradim-startup-sid 实例名 linux系统 启动监听:lsnrct ...

  4. Python 异常处理(Try...Except)

    版权所有,未经许可,禁止转载 章节 Python 介绍 Python 开发环境搭建 Python 语法 Python 变量 Python 数值类型 Python 类型转换 Python 字符串(Str ...

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

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

  6. webpack散记--Typescript

    Typescript 1.js的超集 官网:typescriptlang.org/tslang.cn 来自:微软 安装:官方的  npm i typescript ts-loader --save-d ...

  7. 转载:HTTP 请求头中的 X-Forwarded-For

    本文转自:https://www.jianshu.com/p/15f3498a7fad X-Forwarded-For和相关几个头部的理解 $remote_addr    是nginx与客户端进行TC ...

  8. 尝试用kotlin做一个app(五)

    JSP后台管理系统 开发工具是IntelliJ IDEA+tomcat+mysql5.6.19+mysql-connector-java-5.1.48.jar+easyui+kindeditor 之前 ...

  9. hdfs 删除和新增节点

    最近发现hdfs的一个问题,每当集群开启的时候,有一个节点上的可用空间就一直在减少,并且速度很快,发现是data目录下的dncp_block_verification.log.curr文件在一直变大, ...

  10. 实验吧web-难-认真一点!(布尔盲注,py脚本)

    也可用bp进行爆破,这里用py脚本. 打看网页输入1,显示You are in,输入2,显示You are not in,是个布尔注入. 然后看看过滤了什么. sql注入没有过滤:--+.or sql ...