scrollIntoView()

方法说明

scrollIntoView() 方法可以让元素滚动到可见区域。这是一个非常实用的 API，常用于导航、目录跳转等场景。

// 基础用法
element.scrollIntoView();

// 平滑滚动
element.scrollIntoView({ behavior: 'smooth' });

// 对齐到顶部
element.scrollIntoView({ block: 'start' });

// 对齐到底部
element.scrollIntoView({ block: 'end' });

// 水平对齐
element.scrollIntoView({ inline: 'center' });

• behavior - 滚动行为：'auto'（默认，瞬间）或 'smooth'（平滑）
• block - 垂直对齐：'start'、'center'、'end'、'nearest'
• inline - 水平对齐：'start'、'center'、'end'、'nearest'

示例 1：基础滚动

点击按钮，滚动到目标元素

document.getElementById('target').scrollIntoView({
  behavior: 'smooth'
});

示例 2：对齐方式

控制元素在视口中的对齐位置

// 对齐到顶部
element.scrollIntoView({ block: 'start' });

// 居中显示
element.scrollIntoView({ block: 'center' });

// 对齐到底部
element.scrollIntoView({ block: 'end' });

示例 3：目录导航

实现常见的文档目录导航功能

浏览器兼容性

总结

• 简单易用：一行代码实现滚动到元素
• 平滑滚动：behavior: 'smooth' 提供流畅体验
• 灵活对齐：block 和 inline 选项控制对齐方式
• 常用场景：目录导航、回到顶部、表单错误定位等