侧导航栏平滑滚动效果

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 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;
    };
  };
};