原生JavaScript实现平滑滚动主要依赖于window.scrollTo
方法结合requestAnimationFrame
来实现平滑动画效果。以下是实现平滑滚动的基础概念、优势、类型、应用场景以及示例代码。
window.scrollTo
:该方法用于滚动到文档中的特定位置。requestAnimationFrame
:这是一个优化动画效果的API,它会在浏览器重绘之前调用指定的回调函数,以达到更平滑的动画效果。requestAnimationFrame
可以确保动画在浏览器准备重绘时执行,避免不必要的计算和绘制,从而提高性能。以下是一个简单的原生JavaScript实现页面平滑滚动的示例:
function smoothScroll(targetPosition, duration) {
const startPosition = window.pageYOffset;
const distance = targetPosition - startPosition;
let startTime = null;
function animation(currentTime) {
if (startTime === null) startTime = currentTime;
const timeElapsed = currentTime - startTime;
const run = ease(timeElapsed, startPosition, distance, duration);
window.scrollTo(0, run);
if (timeElapsed < duration) requestAnimationFrame(animation);
}
function ease(t, b, c, d) {
t /= d / 2;
if (t < 1) return c / 2 * t * t + b;
t--;
return -c / 2 * (t * (t - 2) - 1) + b;
}
requestAnimationFrame(animation);
}
// 使用示例
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
const targetId = this.getAttribute('href').substring(1);
const targetElement = document.getElementById(targetId);
if (targetElement) {
smoothScroll(targetElement.offsetTop, 500); // 500是滚动持续时间,单位毫秒
}
});
});
requestAnimationFrame
来优化动画帧。smoothScroll
前,确保目标元素存在且ID正确。requestAnimationFrame
的浏览器,可以考虑使用polyfill或者回退到定时器方案。通过以上方法,可以实现一个简单而有效的原生JavaScript平滑滚动效果,适用于多种网页设计需求。
领取专属 10元无门槛券
手把手带您无忧上云