HTML嵌套div场景下如何通过href跳转定位至指定内层子div

前提配置 #

首先要保证父容器满足可滚动的基础条件，否则不会出现内部滚动效果，相关CSS配置如下：

#main {
  height: 400px; /* 必须设置固定高度/最大高度，内容超出高度才会生成滚动条 */
  overflow-y: auto;
}
/* 子元素高度需要超出父容器，才会产生滚动空间 */
#1, #2 {
  height: 600px;
}

提示：HTML规范不推荐ID以数字开头，部分旧版本浏览器可能识别异常，建议将子元素ID修改为section-1、section-2这类格式

方案1：纯HTML原生实现（无需JS） #

原生锚点默认触发整个文档的全局滚动，只要给父容器添加tabindex属性让其成为可聚焦元素，锚点就会优先触发该容器的内部滚动：

<!-- 跳转链接 -->
<a href="#2">跳转到子div#2</a>

<!-- 嵌套结构 -->
<div id="main" tabindex="0">
  <div id="1">内容区域1</div>
  <div id="2">内容区域2</div>
</div>

注意：tabindex属性会让父容器可以被键盘聚焦，不需要该效果可选择方案2

方案2：JS实现（兼容性更好，无额外副作用） #

给跳转链接绑定点击事件，手动控制父容器滚动位置，同时保留href属性的语义：

<!-- 跳转链接，添加自定义类标识 -->
<a href="#2" class="inner-scroll-link">跳转到子div#2</a>

<div id="main">
  <div id="1">内容区域1</div>
  <div id="2">内容区域2</div>
</div>

对应的JS代码：

document.querySelectorAll('.inner-scroll-link').forEach(link => {
  link.addEventListener('click', e => {
    // 阻止默认的全局滚动行为
    e.preventDefault();
    // 获取目标元素
    const targetId = link.getAttribute('href').slice(1);
    const targetEl = document.getElementById(targetId);
    const scrollParent = document.getElementById('main');
    // 执行滚动定位，不需要平滑滚动可删除behavior参数
    scrollParent.scrollTo({
      top: targetEl.offsetTop - scrollParent.offsetTop,
      behavior: 'smooth'
    });
  });
});

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