H5实现点击侧边导航平滑滚动定位内容 及 内容与导航之间联动

案例的大概标签格式（格式可以随便定，js可以获取到相应的元素就好）

<div class="navs">
  <div>0</div>
  <div>1</div>
</div>
<div class="content">
  <div class="block">0</div>
  <div class="block">1</div>
</div>

设置滚动容器高度和垂直滚动

.content{
    
    
  //height: 400px;
  overflow-y: scroll;
}

侧边导航 锚点跳转方法

// 点击侧边导航 锚点跳转（侧边导航绑定事件）
jumpScrollTo(index) {
    
    
  let blocks = document.querySelectorAll(".block")
  let content = document.querySelector(".content")
  var scrollTop = blocks[index].offsetTop - content.offsetTop;
  content.scrollTo({
    
     top: scrollTop, behavior: "smooth" });
},

容器滚动处理方法

//容器滚动处理（容器绑定事件）
contentScroll(e) {
    
    
  let blocks = document.querySelectorAll(".block")
  blocks.forEach((item, index) => {
    
    
    let offsetTop = item.offsetTop - e.target.offsetTop;
    if (offsetTop - e.target.scrollTop < 80) {
    
    
      //this.navCurrentIndex = index;//设置当前导航选中项的下标
    }
  });
},