实现缓慢回到顶部 #44
Description
介绍
回到顶部效果对于网页纵向篇幅很长的场景比较适合。让我由浅入深介绍一下这个特效。
1. 回到顶部
直接调用web api的window.scrollTo(0, 0)便可以立即回到顶部。
2. 缓慢回到顶部
可以简单通过一段css来实现：
scroll-container, html {
scroll-behavior: smooth;
}
scroll-behavior可以设置的值有两个：auto | smooth。默认的auto表示立即滚动；smooth表示平滑滚动。
让人沮丧的是，截至今天，该css属性并没有被所有浏览器支持，换句话说，兼容性并不是很好。
3. 兼容性较强的缓慢回到顶部
好吧，既然你不仁我不义，我可以用JS来实现缓慢回到顶部效果。
分为两个步骤：
- 获取页面已经滚动的距离（offset），这里有兼容性代码
var y = (window.pageYOffset !== undefined) ? window.pageYOffset : (document.documentElement || document.body.parentNode || document.body).scrollTop;
- 设置整个动画的时间，并借助
window.requestAnimationFrameAPI实现平滑滚动
当然了，除了
window.requestAnimationFrameAPI，还可以使用setTimeout和setInterval实现，只是动画会有些僵硬。
Warning，测试下面的代码的使用，请把
scroll-behavior: smooth;注释掉。
代码如下：
/**
* 缓慢置顶动画
* @param {Number} duration 动画持续时间
*/
function scrollToTop(duration) {
/**
* 获取滚动条与页面顶部的距离，注意兼容性
*/
function getOffSetY() {
return document.body.scrollTop || document.documentElement.scrollTop || window.pageYOffset;
}
/**
* 计算每一帧移动的距离（1秒60帧）
* @param {Number} duration 动画持续时间
*/
function getDistancePerFrame(duration) {
var time = duration || 0.5;
return getOffSetY() / (time * 60)
}
/**
* 根据计算的距离来滚动
*/
function scrollByDistance() {
window.scrollBy(0, -distancePerFrame);
console.log(-distancePerFrame, document.body.scrollTop);
if (getOffSetY() > 0) {
rAF(scrollByDistance)
}
}
var distancePerFrame = Math.floor(getDistancePerFrame());
var rAF = requestAnimationFrame || webkitRequestAnimationFrame || mozRequestAnimationFrame ||
msRequestAnimationFrame || oRequestAnimationFrame;// 兼容性代码
rAF(scrollByDistance);// 开始动画
}