实现平滑滚动页面到顶部的功能（各个浏览器兼容性较强）
Posted 益码凭川
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了实现平滑滚动页面到顶部的功能（各个浏览器兼容性较强）相关的知识，希望对你有一定的参考价值。
react 示例：
componentDidMount() {
// 第一次渲染完成时进行滚动监听
window.addEventListener(‘scroll‘, this.handleScroll, false);
}
componentWillUnmount() {
// 组件移除时去除滚动监听
window.removeEventListener(‘scroll‘, () => {})
}
handleScroll = () => {
this.setState(() => {
return {
backTop: window.pageYOffset >= 400
}
})
}
scrollTo = (el, from = 0, to = 0, duration = 500, endCallback) => {
if (!window.requestAnimationFrame) {
window.requestAnimationFrame = (
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function (callback) {
return window.setTimeout(callback, 1000 / 60);
}
);
}
const difference = Math.abs(from - to);
const step = Math.ceil(difference / duration * 50); // 总的长度 除以 总时间 再乘以 50 => 2000/1000 * 50 = 100 相当于一步走100px
function scroll(start, end, step) {
let d = 0;
if (start = end) { // 如果相等了 就停止执行
endCallback && endCallback();
return;
} else if (start > end) { // 如果开始位置大于最后位置 开始做减法
d = (start - step < end) ? end : start - step;
} ele {
d = (start + step > end) ? end : start + step;
}
if (el === window) {
window.scrollTo(start, d); // 就从开始 start 滚动到 d 处
} else {
el.scrollTop = d;
}
window.requestAnimationFrame(() => scroll(d, end, step));
}
scroll(from, to, step);
};
gotoTop = () => {
setTimeout(() => {
const sTop = document.documentElement.scrollTop || document.body.scrollTop;
this.scrollTo(window, sTop, 0, 1000, () => {
console.log(‘已经滑到顶部啦‘);
});
}, 0);
}
vue 的话一般直接在Vue原型上写就可以。
以上是关于实现平滑滚动页面到顶部的功能（各个浏览器兼容性较强）的主要内容，如果未能解决你的问题，请参考以下文章
jQuery当滚动条滚动时 一个元素到浏览器顶部的距离 随滚动条滚动时，到顶部的距离为本身的top+滚动条滚动