侧导航栏平滑滚动效果

function(){
    var id = '点击的导航栏选项对应商品分类的id'
    //获取所有的分类
     var scrollTargets = document.querySelectorAll('div.good-item');
    //获取商品列表容器当前已滚过高度
    var distance = document.querySelector('div.good-list-wrapper').scrollTop;
    var total = 0;//声明到达目标分类的高度
  //遍历所有的分类
    for(var i=0;i<scrollTargets.length;i++){
       //当前分类中自定义属性保存的分类id
      var myhash = scrollTargets[i].dataset.myhash 
       if(myhash == id){ 
          //保存目标分类所在的高度 +++  60是我项目中搜索栏占用的高度
          total = scrollTargets[i].offsetTop-60;
        } 
    };
   var step = total / 50;    //把需要滚动的高度分为50次平滑过渡
  //判断目标分类是在 当前已滚过的高度之上 还是 之下
  if (total > distance) { 
    scrollDownTarget();//下滚动处理函数
  } else { 
    let newTotal = distance - total ;//更新需要滚动的高度
    step = newTotal / 50; //新的过渡步伐
    scrollUpTarget();//上滚动处理函数
  }; 
/* 下滚动到对应的商品列表 */
  function scrollDownTarget(){ 
      //判断是否已到达目标高度,未到目标分类则每次滚动50分之1 
      if (distance < total) {
          distance += step; 
          document.querySelector('.food-list-wrapper').scrollTop = distance;                                                   
          setTimeout(scrollDownTarget, 10);
  } else { 
        document.querySelector('.food-list-wrapper').scrollTop = total;
  };
}; 
/* 上滚动到对应的商品列表 */
function scrollUpTarget(){
      if (distance > total) { 
      distance -= step; 
      document.querySelector('.food-list-wrapper').scrollTop = distance;                                                
      setTimeout(scrollUpTarget, 10) 
} else { 
      document.querySelector('.food-list-wrapper').scrollTop = distance;
    };
  };
};