JavaScript BOM 操作怎么控制页面平滑滚动到指定位置-js教程-PHP中文网

javascript bom中可用window.scrollto()或element.scrollintoview()配合behavior: 'smooth'实现原生平滑滚动；前者适用于已知像素坐标，后者适合定位dom元素；需注意浏览器兼容性并做降级处理。

javascript bom 操作怎么控制页面平滑滚动到指定位置

JavaScript BOM 中控制页面平滑滚动到指定位置，主要靠 window.scrollTo() 或 element.scrollIntoView() 配合 behavior: 'smooth' 选项实现，无需第三方库，现代浏览器原生支持。

使用 `window.scrollTo()` 平滑滚动到页面坐标

适用于已知目标位置的像素值（如顶部、某固定偏移量）：

滚动到页面顶部：window.scrollTo({ top: 0, behavior: 'smooth' });
滚动到距顶部 500px 处：window.scrollTo({ top: 500, behavior: 'smooth' });
同时指定水平和垂直位置：window.scrollTo({ left: 0, top: 300, behavior: 'smooth' });

使用 `element.scrollIntoView()` 平滑滚动到元素位置

更常用，适合跳转到页面中某个 DOM 元素（如锚点、标题、表单）：

javascript-pro

专注现代 ECMAScript、异步编程、性能优化和全栈的 JavaScript 专家，适用于现代开发

下载

让元素完全进入视口顶部：document.getElementById('section2').scrollIntoView({ behavior: 'smooth', block: 'start' });
居中显示该元素：element.scrollIntoView({ behavior: 'smooth', block: 'center' });
兼容旧写法（不推荐）：element.scrollIntoView(true); 是非平滑的“瞬间滚动”

配合锚点链接或按钮实现点击滚动

给按钮绑定事件，避免默认跳转行为干扰平滑效果：

HTML 示例：@#@#@#@#@#@#@#@#@#@0

JS 拦截并平滑滚动：

document.getElementById('to-contact').addEventListener('click', function(e) {
  e.preventDefault();
  document.querySelector(this.getAttribute('href')).scrollIntoView({ behavior: 'smooth' });
});