如何获取链接锚定元素ID并实现JavaScript平滑滚动？

问题分析 #

你的事件监听器代码存在两个核心问题：

1. document.getElementById() 未传入目标元素ID参数，无法定位对应section
2. 未正确从导航链接的href中提取锚点ID，且未处理点击事件可能触发在父元素（如<li>）的情况

修复后的完整代码 #

修正事件监听器

navList.addEventListener('click', function(event) {
  event.preventDefault();
  // 精准定位到点击的导航链接（避免点击<li>时触发无效逻辑）
  const navLink = event.target.closest('.menu__link');
  if (navLink) {
    // 从href的哈希值中提取section的ID（去掉前缀#）
    const targetSectionId = navLink.hash.slice(1);
    // 获取目标section元素并执行平滑滚动
    const targetSection = document.getElementById(targetSectionId);
    if (targetSection) {
      targetSection.scrollIntoView({ behavior: 'smooth' });
    }
  }
});

同时优化导航生成函数（修复全局变量问题）

const makeNavListItems = () => {
  for (let i = 0; i < sectionsNumber.length; i++) {
    // 给listItem添加let声明，避免全局变量污染
    let listItem = document.createElement('li');
    listItem.innerHTML = ` <a class="menu__link" href="#section${i+1}"> Section ${i+1} </a>`;
    navList.appendChild(listItem);
  }
};

关键说明 #

• 使用closest('.menu__link')确保无论点击区域是链接文本还是父级<li>，都能正确获取导航链接元素
• 通过navLink.hash直接获取链接的锚点部分（如#section1），再用slice(1)去掉#得到纯ID
• 增加元素存在性判断，避免因ID不存在导致的报错

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