JavaScript实现内容滚动与导航标签互动关联方案

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

// alignToTop：Boolean型参数。
// 如果为 true，元素的顶端将和其所在滚动区的可视区域的顶端对齐。
// 如果为 false，元素的底端将和其所在滚动区的可视区域的底端对齐。
el.scrollIntoView(false);

// 可选，scrollIntoViewOptions：{behavior: "smooth", block: "end", inline: "nearest"}
// 可选，behavior ：定义动画过渡效果，"auto"或 "smooth" 之一。默认为 "auto"。
// 可选，block：定义垂直方向的对齐，"start", "center", "end", 或 "nearest"之一。默认为 "start"。
// 可选，inline：定义水平方向的对齐，"start", "center", "end", 或 "nearest"之一。默认为 "nearest"。
el.scrollIntoView({behavior: "smooth", block: "end", inline: "nearest"});
el.scrollIntoView({block: "end"});

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

// 从内容数据list中，获取段落标题作为导航标题。并为导航节点增加href，以段落的id值作为href的值
this.list.map((item, i) => {
  this.activities.push({title: item.title, act: false, href: "#p" + i});
});

// 监听滚动条
window.addEventListener("scroll", function (e) {
  // 防抖动处理
  clearTimeout(that.timeout)
  this.timeout = setTimeout(() => {
    that.activeNavNode(e)
  }, 100)
});

// dom中定位导航
navToPosition(item, index) {
  // 激活相应的导航节点，变色
  this.active = index;
  // 根据导航节点的href信息即id信息，获取对应的元素节点，通过 scrollIntoView 滚动该元素到可视区顶部
  document.querySelector(item.href).scrollIntoView(true);
},

// 激活左侧对应的导航条
activeNavNode(e) {
  const nodes = document.getElementsByTagName("section")
  for (let i = 0; i < nodes.length; i++) {
    let node = nodes[i];
    // 获取该元素此时相对于视口的顶部的距离，即是元素顶部距离视口屏幕上边的距离
    let nodeY = node.getBoundingClientRect().y
    // 当元素距离视口顶部的距离在 [0,200] 之间，设置激活该元素对应左侧的导航标题，这个数字可以按需定义
    // 这里关联内容和导航标签，是巧妙利用了内容在元素集合中的索引序号和导航标签中的一致
    // 即是 list 和 activities 和 nodes 中下标相等的元素，具有对应关联的关系
    if (nodeY <= 200 && nodeY >= 0) {
      this.active = Number(i)
      return
    }
  }
},