javascript - 我怎样才能使用超过 2 个部分的这个 JavaScript 代码？

Question

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

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

标签： javascripthtml

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>