点击按钮后scrollIntoView()无法触发的技术问题求助

核心问题出在你使用的<a href="#">标签上：点击带href="#"的链接时，浏览器会自动执行滚动到页面顶部的默认行为，这个动作会在你调用scrollIntoView()之后触发，直接覆盖了你的滚动操作，所以看起来scrollIntoView没生效；而控制台手动执行时没有这个默认行为干扰，因此能正常滚动。

两种解决方案： #

• 方案1：阻止链接的默认点击行为
  在点击事件处理函数中接收事件对象，调用event.preventDefault()禁用浏览器的默认跳转行为：

  function scrollYellowBox(event) {
    event.preventDefault(); // 阻止链接默认滚动到顶部的行为
    const box = document.getElementById("yellow_box");
    box.scrollIntoView();
  }
  
  const btn = document.getElementById("btn-scroll");
  btn.addEventListener("click", scrollYellowBox);
  

• 方案2：替换为button标签
  把<a>标签换成普通的<button>，按钮本身没有自动跳转的默认行为，无需额外处理：
  修改HTML中的按钮代码：

  <button id="btn-scroll" class="btn">scroll</button>
  

  原JavaScript代码保持不变即可正常工作。

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