使用原生JavaScript滚动到页面指定区域：浏览器兼容性如何？

嘿，我来帮你搞定这个问题～

浏览器兼容性说明 #

scrollIntoView() 这个API的基础兼容性非常出色：

• 所有现代浏览器（Chrome、Firefox、Safari、Edge）都完美支持基础用法（不带参数直接跳转）
• 甚至IE 9及以上版本也支持基础的跳转功能
• 如果你想用它的扩展参数（比如behavior: 'smooth'实现平滑滚动），IE不支持平滑效果，只会直接跳转到目标位置；但所有现代浏览器都对带参数的用法支持得很好

你的代码修正 #

先提下你代码里的几个小问题：

• 原生JS里没有on()方法（这是jQuery的写法），原生绑定点击事件得用addEventListener或者直接赋值onclick
• JS内置对象document是小写开头的，不能写成Document
• 代码最后少了一个闭合括号

修正后的基础版代码：

// 方式1：使用addEventListener（推荐，支持绑定多个事件）
document.getElementById("menu-item-1").addEventListener("click", function() {
  document.getElementById("services").scrollIntoView();
});

// 方式2：直接赋值onclick（简单，但同一元素只能绑定一个点击事件）
document.getElementById("menu-item-1").onclick = function() {
  document.getElementById("services").scrollIntoView();
};

如果想要平滑滚动的进阶效果，可以给scrollIntoView传入配置参数：

document.getElementById("menu-item-1").addEventListener("click", function() {
  document.getElementById("services").scrollIntoView({
    behavior: 'smooth', // 开启平滑滚动
    block: 'start' // 目标元素对齐到视口顶部，可选值还有'center'/'end'/'nearest'
  });
});

这个进阶写法在IE上会降级成直接跳转，不影响核心功能，其他现代浏览器则能实现流畅的平滑滚动效果。

内容的提问来源于stack exchange，提问作者user12845972