JavaScript中scrollIntoView的behavior平滑滚动属性不生效问题求助

我查阅过Stack Overflow上2016年及更早的同类提问，均无法解决我遇到的问题。

scrollIntoView的基础功能可正常触发：点击按钮后页面会跳转到指定区块，但是behavior属性设置的平滑滚动效果没有生效。

我的JS代码如下：

const alllinks = document.querySelectorAll("scroll:link");

alllinks.forEach(function (link) {
  link.addEventListener("click", function (e) {
    e.preventDefault();
    const href = link.getAttribute("href");
    // 滚动到顶部
    if (href === "#") {
      window.scrollTo({
        top: 0,
        behavior: "smooth",
      });
    }
    // 滚动到其他锚点区块
    else if (href !== "#" && href.startsWith("#")) {
      document.getElementById(href).scrollIntoView({
        behavior: `smooth`,
      });
    }
  });
});

我的HTML结构示例如下（仅展示单个区块的代码，其余结构一致）：

<a class="scroll nav-list--item btn" href="#how">How it works</a>
<section class="section-more container" id='how'>...</section>

你的代码存在两处核心错误，修正后即可生效：

1. 选择器错误
   你写的querySelectorAll("scroll:link")是匹配标签名为<scroll>的未访问链接元素，你的页面中不存在这类元素，导致JS事件完全没有绑定到对应按钮上，当前生效的跳转是浏览器原生锚点跳转，没有平滑效果。
   正确的选择器应该匹配带scroll类的<a>标签，改为document.querySelectorAll("a.scroll")即可。

2. ID匹配错误
   你从href属性拿到的值带前缀#（比如#how），直接传入getElementById方法时，会尝试匹配id为#how的元素，但你的目标元素id为how，没有#前缀，会匹配失败抛出错误。
   需要去掉href的前缀#再传入，改为document.getElementById(href.slice(1))即可。

修正后的完整JS代码如下：

const alllinks = document.querySelectorAll("a.scroll");

alllinks.forEach(function (link) {
  link.addEventListener("click", function (e) {
    e.preventDefault();
    const href = link.getAttribute("href");
    // 滚动到顶部
    if (href === "#") {
      window.scrollTo({
        top: 0,
        behavior: "smooth",
      });
    }
    // 滚动到其他锚点区块
    else if (href !== "#" && href.startsWith("#")) {
      document.getElementById(href.slice(1)).scrollIntoView({
        behavior: "smooth",
      });
    }
  });
});

如果修正后仍存在问题，可检查全局CSS是否禁用了平滑滚动，移除scroll-behavior: auto相关规则，或显式设置html { scroll-behavior: smooth; }作为兜底方案。

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