小花 - JS缓冲,平滑移动(例:同页面改变scroll,平滑滚动)
2018-01-31 10:52
162 查看
版权声明:http://blog.csdn.net/mx18519142864/article/details/79213980
例如:一个点击事件(点按钮),改变scroll的位置。
这个功能很简单,不再赘述,效果为点击button,页面瞬间闪到目标位置,
效果很生硬,那我现在要加个缓冲,让它慢慢平滑过去。
jquery实现:用一个animate 后面参数给个时间就可简单实现。
JS实现:例:一个简单的点击导航栏不同的li ,平滑改变当前页面scroll不同位置
这是我用react项目写的,掺杂了一些react语法,但原理一样
代码:const top= document.getElementById(name).offsetTop;
//获取到这个标签,且算出其距离页面顶部距离
let timer =null;
//设个 定时器
clearInterval(timer);
//每次执行时 先清一下之前的定时器if(this.state.speedOver){
//设个开关(执行完上次任务才能再次执行) 不设置快速连续点击不同的li强行改变会出bug
timer=setInterval(()=>{
//开始定时器
let speed= (top-window.pageYOffset)/2;
//加速度(目标距顶部的距离 - 此时滚动条距顶部的距离)
speed= speed>0?Math.ceil(speed):Math.floor(speed);
//大于零向上取整,小于向下取整
if(window.pageYOffset==top){
//当目标距顶部的距离 = 此时滚动条距顶部的距离
clearInterval(timer);
//证明时间完成,清除定时器
this.setState({ speedOver:true });
//打开开关,可以进行下次事件了
}else{
document.documentElement.scrollTop=document.body.scrollTop=window.pageYOffset+speed;
this.setState({ speedOver:false });
//否则,window.pageYOffset和speed会不断的改变
//直至到目标处位置 此时的开关是一直保持关闭的
}
},30)
}
//想要改变scroll平滑跳转的快慢,调上方的 /2
例如:一个点击事件(点按钮),改变scroll的位置。
这个功能很简单,不再赘述,效果为点击button,页面瞬间闪到目标位置,
效果很生硬,那我现在要加个缓冲,让它慢慢平滑过去。
jquery实现:用一个animate 后面参数给个时间就可简单实现。
JS实现:例:一个简单的点击导航栏不同的li ,平滑改变当前页面scroll不同位置
这是我用react项目写的,掺杂了一些react语法,但原理一样
代码:const top= document.getElementById(name).offsetTop;
//获取到这个标签,且算出其距离页面顶部距离
let timer =null;
//设个 定时器
clearInterval(timer);
//每次执行时 先清一下之前的定时器if(this.state.speedOver){
//设个开关(执行完上次任务才能再次执行) 不设置快速连续点击不同的li强行改变会出bug
timer=setInterval(()=>{
//开始定时器
let speed= (top-window.pageYOffset)/2;
//加速度(目标距顶部的距离 - 此时滚动条距顶部的距离)
speed= speed>0?Math.ceil(speed):Math.floor(speed);
//大于零向上取整,小于向下取整
if(window.pageYOffset==top){
//当目标距顶部的距离 = 此时滚动条距顶部的距离
clearInterval(timer);
//证明时间完成,清除定时器
this.setState({ speedOver:true });
//打开开关,可以进行下次事件了
}else{
document.documentElement.scrollTop=document.body.scrollTop=window.pageYOffset+speed;
this.setState({ speedOver:false });
//否则,window.pageYOffset和speed会不断的改变
//直至到目标处位置 此时的开关是一直保持关闭的
}
},30)
}
//想要改变scroll平滑跳转的快慢,调上方的 /2
相关文章推荐
- scrollReveal.js – 页面滚动显示动画JS
- ReactJS 页面跳转保存当前scrollTop回来时,自动移动到上次浏览器的位置
- scrollReveal.js – 页面滚动显示动画JS
- scrollReveal.js – 页面上下滚动时动画多次播放
- HorizontalScrollView+GridView 设置初始进入页面后平滑的滚动到girdView的某一给定位置
- 解决js页面滚动效果scrollTop在FireFox与Chrome浏览器间的兼容问题的方法
- scrollReveal.js页面滚动动态效果
- JS图片无缝、平滑滚动代码,多用于推广页面
- JS实现页面table鼠标移动改变tr行颜色,单击tr选中复选框功能
- 页面滚动图片等元素动态加载插件jquery.scrollLoading.js
- scrollReveal.js – 页面滚动显示动画JS
- 用JS有效解决移动web浏览器中HTML元素的overflow:scroll滚动属性失效问题
- 解决js页面滚动效果scrollTop在FireFox与Chrome浏览器间的兼容问题的方法
- 页面滚动(scroll)有关JS操作
- JS 侧栏导航点击定位页面内容位置及滚动条滚动改变导航元素对应状态
- 解决js页面滚动效果scrollTop在FireFox与Chrome浏览器间的兼容问题的方法
- ReactJS 页面跳转保存当前scrollTop回来时,自动移动到上次浏览器的位置
- 各浏览器页面滚动值(scrollTop)的获取与设定。
- js阻止移动端页面滚动的两种方法