项目中经常会遇到触发事件页面自动滚动到某一位置的情况,一般可以用游标实现,但也有另一种简单的实现思路,利用element.getBoundingClientRect()和window.scrollTo()和window.requestAnimationFrame()
由于是JS控制滚动条,所以我们可以轻松添加动画效果,代码如下
function animateScroll(element,speed) {
let rect=element.getBoundingClientRect();
//获取元素相对窗口的top值,此处应加上窗口本身的偏移
let top=window.pageYOffset+rect.top;
let currentTop=0;
let requestId;
//采用requestAnimationFrame,平滑动画
function step(timestamp) {
currentTop+=speed;
if(currentTop<=top){
window.scrollTo(0,currentTop);
requestId=window.requestAnimationFrame(step);
}else{
window.cancelAnimationFrame(requestId);
}
}
window.requestAnimationFrame(step);
}