jquery实现楼层(电梯)效果(点哪个按钮滚动条滚动到对应的内容上面去)

效果类似如下

html

<!--tab列表-->
<ul class="tablist">
      <li class="tab-active">方案介绍</li>
      <li>方案架构</li>
      <li>方案优势</li>
      <li>应用场景</li>
      <li>合作案例</li>
      <li>方案咨询</li>
</ul>

<!--具体内容-->
<div id="louti1" style="background:red; height: 600px;"></div>
<div id="louti2" style="background:yellow; height: 600px;"></div>
<div id="louti3" style="background:green; height: 600px;"></div>
<div id="louti4" style="background:red; height: 600px;"></div>
<div id="louti5" style="background:yellow; height: 600px;"></div>
<div id="louti6" style="background:red; height: 600px;"></div>

css

/*激活的tab按钮添加下划线*/
 .tab-active {
      border-bottom: 2px solid #134B8E;
 }

js

//引入jquery
 <script src="https://cdn.bootcss.com/jquery/3.6.0/jquery.min.js"></script>
 
 $(function () {

      var _index = 0;
      $(".tablist li").click(function () {
      //这个是给激活的tab按钮添加下划线
        $(this).addClass("tab-active").siblings().removeClass("tab-active");

        _index = $(this).index() + 1;

        var _top = $("#louti" + _index).offset().top;

        $("body,html").animate({
          scrollTop: _top
        }, 500);
      });
}