var el = document.getElementById("p1");
// true 可以省略效果相同
el.scrollIntoView(true)

// alignToTop：Boolean型參數(shù)。
// 如果為 true，元素的頂端將和其所在滾動區(qū)的可視區(qū)域的頂端對齊。
// 如果為 false，元素的底端將和其所在滾動區(qū)的可視區(qū)域的底端對齊。
el.scrollIntoView(false);

// 可選，scrollIntoViewOptions：{behavior: "smooth", block: "end", inline: "nearest"}
// 可選，behavior ：定義動畫過渡效果，"auto"或 "smooth" 之一。默認(rèn)為 "auto"。
// 可選，block：定義垂直方向的對齊，"start", "center", "end", 或 "nearest"之一。默認(rèn)為 "start"。
// 可選，inline：定義水平方向的對齊，"start", "center", "end", 或 "nearest"之一。默認(rèn)為 "nearest"。
el.scrollIntoView({behavior: "smooth", block: "end", inline: "nearest"});
el.scrollIntoView({block: "end"});

console.dir(document.getElementById("p1").getBoundingClientRect())

// 從內(nèi)容數(shù)據(jù)list中，獲取段落標(biāo)題作為導(dǎo)航標(biāo)題。并為導(dǎo)航節(jié)點(diǎn)增加href，以段落的id值作為href的值
this.list.map((item, i) => {
  this.activities.push({title: item.title, act: false, href: "#p" + i});
});

// 監(jiān)聽滾動條
window.addEventListener("scroll", function (e) {
  // 防抖動處理
  clearTimeout(that.timeout)
  this.timeout = setTimeout(() => {
    that.activeNavNode(e)
  }, 100)
});

// dom中定位導(dǎo)航
navToPosition(item, index) {
  // 激活相應(yīng)的導(dǎo)航節(jié)點(diǎn)，變色
  this.active = index;
  // 根據(jù)導(dǎo)航節(jié)點(diǎn)的href信息即id信息，獲取對應(yīng)的元素節(jié)點(diǎn)，通過 scrollIntoView 滾動該元素到可視區(qū)頂部
  document.querySelector(item.href).scrollIntoView(true);
},

// 激活左側(cè)對應(yīng)的導(dǎo)航條
activeNavNode(e) {
  const nodes = document.getElementsByTagName("section")
  for (let i = 0; i < nodes.length; i++) {
    let node = nodes[i];
    // 獲取該元素此時相對于視口的頂部的距離，即是元素頂部距離視口屏幕上邊的距離
    let nodeY = node.getBoundingClientRect().y
    // 當(dāng)元素距離視口頂部的距離在 [0,200] 之間，設(shè)置激活該元素對應(yīng)左側(cè)的導(dǎo)航標(biāo)題，這個數(shù)字可以按需定義
    // 這里關(guān)聯(lián)內(nèi)容和導(dǎo)航標(biāo)簽，是巧妙利用了內(nèi)容在元素集合中的索引序號和導(dǎo)航標(biāo)簽中的一致
    // 即是 list 和 activities 和 nodes 中下標(biāo)相等的元素，具有對應(yīng)關(guān)聯(lián)的關(guān)系
    if (nodeY <= 200 && nodeY >= 0) {
      this.active = Number(i)
      return
    }
  }
},