javascript - 我如何使用这段包含超过 2 个部分的 JavaScript 代码？

Question

我是 javascript 和 Html 新手，我创建了两个滚动按钮从第 1 部分转到第 2 部分。如果我需要两个以上的部分该怎么办？

function f1() {
        var elmnt1 = document.getElementById("sez1");
        elmnt1.scrollIntoView();
    }
    function f2() {
        var elmnt2 = document.getElementById("sez2");
        elmnt2.scrollIntoView();
    }

Answer 1

做到这一点的最佳方法是为任何解决方案创建一个模式，使其成为通用解决方案。

1. 用您喜欢的属性标记您的部分，例如:scroll-to-id="1"，您的部分现在看起来像 <div scroll-to-id="1"></div><div scroll-to-id="2"></div><div scroll-to-id="3"></div><div scroll-to-id="4"></div>
2. 现在创建一个函数，它将数字作为输入并滚动到所需的部分。要获取所有目标部分，我们可以调用函数 document.querySelectorAll('[scroll-to-id]')获取所有带有属性scroll-to-id的元素。
3. 然后找到具有所需 scroll-to-id 的元素转到并滚动到该元素。

完整解决方案如下:

function scrollToSection(sectionId) {
  const sections = document.querySelectorAll('[scroll-to-id]');
  for(let section of sections) {
    if(section.getAttribute('scroll-to-id') == sectionId) {
      section.scrollIntoView();
      // scrollIntoView doesnot have the best browser supports. It is better to calculate the position of the section and do a scrollTo() or scrollBy()
    }
  }
}

button {
  margin-bottom: 20px;
}

div {
  padding-top: 80px;
  padding-bottom: 80px;
  border: 1px solid #cecece;
}

<button onclick="scrollToSection(1)">Scroll To 1</button>
<button onclick="scrollToSection(2)">Scroll To 2</button>
<button onclick="scrollToSection(3)">Scroll To 3</button>
<button onclick="scrollToSection(4)">Scroll To 4</button>

<div scroll-to-id="1">Hello 1</div>
<div scroll-to-id="2">Hello 2</div>
<div scroll-to-id="3">Hello 3</div>
<div scroll-to-id="4">Hello 4</div>