### 开始 ###

写一个自动滚动过度到指定位置的一个函数 通过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.发送邮件 public ActionResult SendEmail() { var member = dbSession.MemberRepository.LoadEntities(p => ...

  2. 利用vim查看日志,快速定位问题《转载》

    利用vim查看日志,快速定位问题 链接:https://www.cnblogs.com/abcwt112/p/5192944.html

  3. yarn调度器 FairScheduler 与 CapacityScheduler

    yarn FairScheduler 与 CapacityScheduler CapacityScheduler(根据计算能力调度) CapacityScheduler 允许多个组织共享整个集群, 每 ...

  4. rsync错误

    rsync error:No route to host rsync服务端开启的iptables防火墙 [root@nfs01 tmp]# rsync -avz /etc/hosts rsync_ba ...

  5. junit基础学习之-测试controller层(2)

    准备工作: eclipse本身带有junit4,可以直接build path,加入junit. 连接数据库的配置文件需要修改,之前的文件是采用properties+xml文件的形式,但是在测试的时候因 ...

  6. Kicstart+pxe搭建自动化安装Linux 整理了一下

    一直想把 有道云得笔记整理一下传上来  都是自己亲测过 ,先来这篇吧  : 二小时安装 100台Linux  system  其实Winddows 也可以这样搞  只是方法    组件不同  原理一样 ...

  7. 微信小程序手绘地图实现之《Canvas》

    环境:微信SDK2.9+   + uniapp (可切换直接使用.map.js不限制环境) 正题: 先创建一个地图组件 <template> <view class="cu ...

  8. BZOJ 4888 [Tjoi2017]异或和

    题解:对每一位分别考虑贡献 先求前缀和 按照二进制减法分类讨论,求出最终这一位是1还是0 用树状数组维护 注意:树状数组对0这个位置单独考虑 #include<iostream> #inc ...

  9. HZNU-ACM寒假集训Day4小结 最短路

    最短路 1.Floy 复杂度O(N3)  适用于任何图(不存在负环) 模板 --kuangbin #include<iostream> #include<cstdio> #in ...

  10. linux文件编辑VI命令详解

    vi编辑器是所有Unix及Linux系统下标准的编辑器,它的强大不逊色于任何最新的文本编辑器,这里只是简单地介绍一下它的用法和一小部分指令.由于对Unix及Linux系统的任何版本,vi编辑器是完全相 ...