scrollIntoView - 行为不起作用（JavaScript）

Question

我知道在 stackOverflow 上还有其他关于相同问题的问题（2016 年及更早版本），但我都通过了它们，但它们并没有解决我的问题。

滚动到视图工作，当我单击按钮时，页面会转到它应该转到的特定部分，但行为属性不起作用。

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

alllinks.forEach(function (link) {
  link.addEventListener("click", function (e) {
    e.preventDefault();
    const href = link.getAttribute("href");
    // Scroll to top
    if (href === "#") {
      window.scrollTo({
        top: 0,
        behavior: "smooth",
      });
    }
    //Scroll to other links
    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>

这就是所有需要的代码。

CODE PEN EXAMPLE

Answer 1

getElementById的参数必须是元素id值，不能包含“#”。

 document.getElementById(href).scrollIntoView({
    behavior: `smooth`,
  });

这段代码抛出 TypeError 是因为 document.getElementById(href) with href = "#how" 会返回 undefined，所以当你在链接中被点击时，滚动行为只是 a 链接。 也许您可以像这样更正它：

document.getElementById(href.slice(1)).scrollIntoView({
    behavior: `smooth`,
  });

Answer 2

也添加这些附加属性以使其工作

element.scrollIntoView({
  behavior: 'smooth',
  block: 'start',
  inline: 'nearest'
});

编辑：在您的情况下，您只需将以下 css 放入您的主样式文件中，因为滚动不是由您编写的 javascript 代码发生的，它是由于标签的 href 而发生的。你甚至可以删除 javascript 代码

* {
    scroll-behavior: smooth
 }