页面缓冲滚动到指定位置

引自https://segmentfault.com/a/1190000016839122?utm_source=weekly&utm_medium=email&utm_campaign=email_weekly

公共方法

/**
* 缓冲函数
* @param {Number} position 当前滚动位置
* @param {Number} destination 目标位置
* @param {Number} rate 缓动率
* @param {Function} callback 缓动结束回调函数 两个参数分别是当前位置和是否结束
*/
var easeout = function (position, destination, rate, callback) {if (position === destination || typeof destination !== 'number') {return false;}destination = destination || 0;rate = rate || 2;// 不存在原生`requestAnimationFrame`，用`setTimeout`模拟替代if (!window.requestAnimationFrame) {window.requestAnimationFrame = function (fn) {return setTimeout(fn, 17);}}var step = function () {position = position + (destination - position) / rate;if (Math.abs(destination - position) < 1) {callback(destination, true);return;}callback(position, false);requestAnimationFrame(step);};step();
}

调用的demo

var scrollTopSmooth = function (position) {// 当前滚动高度var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;easeout(scrollTop, position, 5, function (val) {window.scrollTo(0, val);});
}$backToTop = document.querySelector('.back-to-top')
$backToTop.addEventListener('click', function () {scrollTopSmooth(200);
}, false);

转载于:https://www.cnblogs.com/myzy/p/9927900.html

页面缓冲滚动到指定位置相关推荐

div滚动到指定位置 vue_Vue列表实现滚动到指定位置样式改变
这个需求大概是这样子: 我做的一个聊天Demo,在搜索框搜索用户,可以滚动到指定的用户.然后成选中状态. 这是目前状态,我搜索南宫仆射 ,想要下面的用户列表直接滚动到南宫仆射并改变CSS样式. 查 ...
监听某个区域滚动_监听页面滚动及滚动到指定位置
一.原生js通过window.onscroll监听 window.onscroll = function() { //为了保证兼容性,这里取两个值,哪个有值取哪一个 //scrollTop就是触发滚轮 ...
js控制页面滚动到指定位置，js中scrollIntoView()的用法
js中scrillIntoView()的用法--页面滚动到指定位置最近遇到一个问题,在一个页面上,点击某个按钮时,滚动到页面的某一位置. 如图: 如果是我写的话,我可能会先获取滚动到的元素,然后获取 ...
页面滚动到指定位置导航栏固定顶部
做一个网页时经常会用到导航栏,导航栏对于一个网站来说,地位是举足轻重的,在用到导航栏时,我们经常会用到一个效果,就是当页面滑动到一定的位置时,导航栏需要固定在页面的顶部,这是怎么实现的呢? 下面的代码 ...
vue 点击div 获取位置_vue 点击元素滚动到指定位置
{{item}} {{item}} data() {return{ navgator: ['列表A','列表B','列表C','列表D', ], navgatorIndex:0, listBox: [ ...
【小程序】滚动到指定位置
点击按钮滚动到页面内的指定位置. wxml <view class="btn" catchtap="scrollToElement">去报名< ...
Vue 页面跳转到指定位置
Vue 页面跳转到指定位置页面跳转页面 script style 进阶版:随着页面滚动变换导航菜单样式监听页面滚动方法销毁滚动页面跳转页面 <template><div ...
Query实现将div中滚动条滚动到指定位置的方法，html中offsetTop、clientTop、scrollTop、offsetTop各属性的解释
TML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth scrollHeight: 获取对象的滚动高度. scrollLeft:设置或获取位于 ...
用startSmoothScroll实现RecyclerView滚动到指定位置并置顶，含有动画。
RecyclerView滚动到指定位置并置顶 RecyclerView本身提供了几个定位的方法,除了手动滑动的scrollTo,smootScrollTo和scrollBy,smoothScrollB ...

页面缓冲滚动到指定位置

页面缓冲滚动到指定位置相关推荐

最新文章

热门文章