使用JavaScript监听scroll事件并结合平滑滚动API可实现流畅滚动效果。通过window.addEventListener('scroll')获取滚动位置，利用window.scrollTo()和element.scrollIntoView()配合behavior: 'smooth'实现平滑滚动，常用于返回顶部按钮或导航跳转，并建议添加防抖优化性能及兼容性处理。
页面滚动效果能让用户在浏览网页时获得更流畅的视觉体验。JavaScript 提供了多种方式来监听和控制页面滚动，结合 scroll 事件 和现代浏览器支持的 平滑滚动 API，可以轻松实现各种滚动交互效果。下面详细介绍如何使用 JS 实现滚动监听与平滑滚动。
监听 scroll 事件获取滚动状态
通过 window 对象上的 scroll 事件，可以实时获取用户滚动页面的行为，比如当前滚动位置、是否滚动到底部等。
基本用法如下：
window.addEventListener('scroll', function() {
const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
console.log('当前滚动高度:', scrollTop);
});
说明：
立即学习“Java免费学习笔记（深入）”；
- window.pageYOffset 是当前页面垂直滚动的距离（现代写法）
- document.documentElement.scrollTop 兼容部分旧浏览器
- 该事件会频繁触发，建议配合防抖（debounce）优化性能
实现平滑滚动到指定位置
传统方法使用定时器逐步改变滚动位置，但现代浏览器原生支持更简洁的平滑滚动方式。
推荐使用 window.scrollTo() 配合 behavior 属性：
// 平滑滚动到页面顶部
window.scrollTo({
top: 0,
behavior: 'smooth'
});
// 滚动到某个元素的位置
const element = document.getElementById('section2');
element.scrollIntoView({
behavior: 'smooth',
block: 'start'
});
说明：
立即学习“Java免费学习笔记（深入）”；
- behavior: 'smooth' 启用动画式滚动
- block: 'start' 控制元素在视口中的对齐方式
- 无需引入第三方库，兼容性良好（IE 不支持，需考虑降级）
自定义滚动按钮或导航菜单
常用于“回到顶部”按钮或单页应用内部锚点跳转。
示例：点击按钮平滑返回顶部
const backToTop = document.getElementById('back-to-top');
// 显示/隐藏按钮逻辑
window.addEventListener('scroll', function() {
if (window.pageYOffset > 300) {
backToTop.style.display = 'block';
} else {
backToTop.style.display = 'none';
}
});
// 点击事件绑定
backToTop.addEventListener('click', function(e) {
e.preventDefault();
window.scrollTo({
top: 0,
behavior: 'smooth'
});
});
你也可以将这一逻辑扩展到导航菜单项，点击不同链接跳转到对应内容区块。
注意事项与兼容处理
虽然现代浏览器普遍支持 smooth scrolling，但在一些老版本中可能无效。
应对策略：
- 检测 behavior 是否被支持，否则退化为快速跳转
- 使用 requestAnimationFrame 实现自定义动画作为 fallback
- 移动端注意 touch 滚动与 JS 滚动的冲突问题
基本上就这些。掌握 scroll 事件和 scrollIntoView / scrollTo 的用法，就能满足大多数滚动交互需求，不需要复杂框架也能做出丝滑体验。
