scrollIntoView - 行为不起作用（JavaScript）

Question

我知道 Whosebug 上还有其他相同问题（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

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

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

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

* {
    scroll-behavior: smooth
 }

Answer 2

getElementById的参数必须是元素id值且不能包含"#"。

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

此代码块抛出类型错误，因为 document.getElementById(href) with href = "#how" 将 return 未定义，因此当您在 link 中单击时，滚动行为只是 a link 的默认行为。也许你可以像这样更正它：

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

scrollIntoView - 行为不起作用（JavaScript）

scrollIntoView - behavior is not working(JavaScript)

javascript

html

css

smooth-scrolling

js-scrollintoview