如何用JavaScript实现平滑滚动？附新手代码求优化建议

你的代码优化方向 #

嘿，接触编程两个月就能写出这样的平滑滚动功能，已经超棒啦！你的初始实现其实已经精准完成了核心需求，不过可以做几个小调整让代码更健壮、更易维护：

1. 增加目标区块不存在的容错处理 #

如果不小心出现链接指向的区块不存在的情况，当前代码会直接报错。我们可以加个简单判断避免这种问题：

const menu = document.querySelectorAll('.js-menu a[href^="#"]');
function smoothScroll(event) {
  event.preventDefault();
  const linkTo = event.currentTarget.getAttribute("href");
  const section = document.querySelector(linkTo);
  // 新增：检查目标区块是否存在，不存在则提前退出函数
  if (!section) return;
  section.scrollIntoView({ 
    block: "start", 
    behavior: "smooth" 
  });
}
menu.forEach((link) => link.addEventListener("click", smoothScroll));

2. 可选：用语义化data-*属性替代href（进阶小技巧） #

如果不想依赖href属性（比如担心和原生锚点的地址栏变化冲突），可以用HTML5的自定义data-*属性，写法更语义化：
修改HTML：

<nav class="menu js-menu">
  <ul>
    <li><a data-target="#animais" href="#">Animais</a></li>
    <li><a data-target="#faq" href="#">Faq</a></li>
    <li><a data-target="#contato" href="#">Contato</a></li>
  </ul>
</nav>

对应的JS：

function smoothScroll(event) {
  event.preventDefault();
  const linkTo = event.currentTarget.dataset.target;
  const section = document.querySelector(linkTo);
  if (!section) return;
  section.scrollIntoView({ block: "start", behavior: "smooth" });
}

当然，如果你希望用户可以通过地址栏直接访问对应区块，保留原href的写法会更实用~

3. 保持原选择器的精准性 #

你的原选择器.js-menu a[href^="#"]其实非常稳妥，它只匹配以#开头的内部链接，避免误选带#参数的外部链接，这点做得很到位！

给编程新手的实用小贴士 #

作为刚入门两个月的新手，你已经在动手做实际项目，这是最快的成长方式！分享几个过来人总结的小建议：

• 先实现功能，再追求完美：不要因为担心代码“不够优”就不敢动手，先让功能跑起来，再慢慢打磨细节，每一次修改都是进步。
• 善用浏览器调试工具：按F12打开开发者工具，用Console面板看报错信息，用Sources面板断点调试JS，能帮你快速定位问题，比瞎猜高效10倍。
• 优先啃官方文档：比如MDN上关于scrollIntoView的说明，里面有详细的参数解释和兼容性信息，比零散的教程更权威靠谱。
• 养成写注释的习惯：哪怕代码很短，也可以给函数加一句// 处理菜单点击后的平滑滚动，以后回头看或者和别人协作时，能快速明白代码意图。
• 拆分任务，逐个击破：把大功能拆成小任务，比如先实现“点击跳转”，再加“平滑动画”，最后加“错误处理”，一步步来不会有挫败感。
• 多尝试不同实现方式：同一个功能可以换种写法试试（比如不用scrollIntoView，用window.scrollTo手动计算滚动位置），对比哪种更适合当前场景，能加深对知识点的理解。

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