js点击左侧(头部)菜单栏右侧滑动到对应内容

var htmlTop = 0;

//获取右侧div高度，小编这里需要+300
var box1 = $('#main-box-1').offset().top + 300;
var box2 = $('#main-box-2').offset().top + 300;
var box3 = $('#main-box-3').offset().top + 300;
var box4 = $('#main-box-4').offset().top + 300;

//点击左边li菜单右边滑动到指定位置
$('.main-l li').click(function() {
  let index = $(this).index();
  if (index == 0) {
    $('html, body').animate({
      scrollTop: 0
    }, 500)
  } else if (index == 1) {
    $('html, body').animate({
      scrollTop: box1
    }, 500)
  } else if (index == 2) {
    $('html, body').animate({
      scrollTop: box2
    }, 500)
  } else if (index == 3) {
    $('html, body').animate({
      scrollTop: box3
    }, 500)
  } else if (index == 4) {
    $('html, body').animate({
      scrollTop: box4
    }, 500)
  }
})
//点击后删除原先li样式新增当前li样式
$(window).scroll(function(e){
  htmlTop = $(window).scrollTop();
  if(htmlTop == 0){
    $(".main-l li").eq(0).addClass("active").siblings().removeClass("active");
  }else if(htmlTop >= box1 && htmlTop < box2){
    $(".main-l li").eq(1).addClass("active").siblings().removeClass("active");
  }else if(htmlTop >= box2 && htmlTop < box3){
    $(".main-l li").eq(2).addClass("active").siblings().removeClass("active");
  }else if(htmlTop >= box3 && htmlTop < box4){
    $(".main-l li").eq(3).addClass("active").siblings().removeClass("active");
  }else if(htmlTop >= box4){
    $(".main-l li").eq(4).addClass("active").siblings().removeClass("active");
  }
});