使用javascript的scrollToElement函数

Question

这个 JavaScript 内容：

function scrollToElement(elementSelector, instance = 0) {
  const elements = document.querySelectorAll(elementSelector);
  if (elements.length > instance) {
   elements[instance].scrollIntoView({ behavior: "smooth" });
  }
 }

const link1 = document.getElementById("link1");
const link2 = document.getElementById("link2");
const link3 = document.getElementById("link3");

link1.addEventListener("click", () => {
  scrollToElement(".header");
});

但我不明白这一点以及为什么它使用实例以及 elements.length 和实例之间的关系是什么

Answer 1

这是一个简化的类似示例（使用日志记录而不是滚动）。

elementSelector

是一个CSS查询，用于获取匹配的元素。

index

标识所需元素的位置。 （0表示获取第一个匹配元素，1表示第二个......）

function test(elementSelector, index) {
  const elements = document.querySelectorAll(elementSelector);
  const element = elements[index];
  if (element) console.log(element.textContent);
}

const button1 = document.getElementById("btn1");
const button2 = document.getElementById("btn2");
const button3 = document.getElementById("btn3");

button1.addEventListener("click", () => test(".text", 0)); // Get the first 
button2.addEventListener("click", () => test(".text", 1)); // Get the second
button3.addEventListener("click", () => test(".text", 2)); // Get the third

<button id="btn1">Button 1</button>
<button id="btn2">Button 2</button>
<button id="btn3">Button 3</button>

<span class="text">1st Text</span>
<span class="text">2nd Text</span>
<span class="text">3rd Text</span>

Answer 2

所以这里，scrollToElement() 函数需要两个参数：

elementSelector: A CSS selector that matches the element to scroll to.
instance: The index of the element to scroll to. Defaults to 0.

该函数首先使用 document.querySelectorAll() 方法获取与 CSS 选择器匹配的所有元素。

然后，它检查元素数量是否大于实例参数。

如果是，该函数将使用 element.scrollIntoView() 方法将 instance 元素滚动到视图中。

scrollIntoView() 方法采用一个名为Behavior 的可选参数，该参数指定如何对滚动进行动画处理。

在这种情况下，您将其设置为平滑，以便滚动动画平滑。

---

当用户单击 link1 元素时，会调用 scrollToElement() 函数。

elementSelector参数设置为.header，它与标题元素的CSS选择器匹配。

instance参数设置为0，这意味着该函数将滚动到它找到的第一个标题元素。

总之，当用户单击 link1 元素时，代码将滚动到页面上的第一个标题元素。