可通过scrollIntoView()、scrollTo()/scrollBy()或CSS scroll-behavior实现平滑滚动：scrollIntoView({behavior:"smooth"})让元素滚动至视口；window.scrollTo({top:0,behavior:"smooth"})等用于窗口级精确滚动；CSS设置html{scroll-behavior:smooth}可使锚点链接自动平滑；不支持时可检测回退或使用polyfill。

可以通过 scrollIntoView() 方法或 scrollTo() 方法配合 behavior: "smooth" 选项，实现元素的平滑滚动。

使用 scrollIntoView 实现目标元素平滑滚动

这是最常用的方式，适用于让某个元素滚动到视口可见区域。

• 调用元素的 scrollIntoView() 方法，并传入配置对象：{ behavior: "smooth", block: "start" }
• block 控制垂直对齐方式（"start"、"center"、"end" 或 "nearest"）
• 兼容性良好（现代浏览器均支持，IE 不支持 smooth 行为）

使用 scrollTo 或 scrollBy 进行窗口级平滑滚动

适合精确控制滚动位置，比如回到顶部、跳转到某像素偏移处。

Alibabacloud Sdk Client Initialization For Java

在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。

下载

• window.scrollTo({ top: 0, left: 0, behavior: "smooth" }) 可平滑回到顶部
• window.scrollBy({ top: 200, behavior: "smooth" }) 相对滚动 200px
• 注意：必须传入对象参数，旧式数字参数（如 scrollTo(0, 100)）不支持 smooth

为锚点链接启用平滑滚动（无需 JS）

CSS 也能实现，且更简洁：

立即学习“Java免费学习笔记（深入）”；

• 在根元素（通常是 html）上添加样式：scroll-behavior: smooth;
• 所有原生锚点跳转（如 <a href="#section1">跳转</a>）自动平滑
• 该声明仅作用于文档根滚动容器，不影响 iframe 或自定义滚动容器

处理不支持 smooth 的浏览器（可选降级）

若需兼容老版本 Safari 或 IE，可检测支持性并回退到即时滚动：

• 通过 typeof document.documentElement.style.scrollBehavior !== "undefined" 判断是否支持
• 不支持时，改用 element.offsetTop 计算位置 + window.scrollTo() 瞬间跳转
• 也可引入轻量 polyfill（如 smoothscroll-polyfill），但多数场景已无需