Slow down scrolling speed

Question

I have 3 tabs on the ui. As the user scrolls down the second tab is shown and then the third tab. However, the tabs scrolling speed is fast, so as soon as the user scrolls from 1st tab, 3rd tab is seen. Please help me to slow the process so that the 2nd tab is seen

function checkPosition(){
      var div1 = $("section.u3gm-header");
      var div2 = $('section.u3m-slider-top-tabs');
      var div1_top = div1.offset().top;
      var div2_top = div2.offset().top;
      var div1_bottom = div1_top + div1.height();
      var div2_bottom = div2_top + div2.height();
      return [div1_bottom, div2_top, div1_top, div2_bottom];
    
    }
    var lastScrollTop = 0;
    
    $(window).scroll(function() {
        var st = $(this).scrollTop();
        let [div1_bottom, div2_top, div1_top, div2_bottom] = checkPosition();
        if (st > lastScrollTop){
            if (div1_bottom >= div2_top && div1_top < div2_bottom) {
              console.log(slider.index);
              if (slider.index >= slider.slideIds.length - 1) {
                slider.index = slider.slideIds.length - 1;
              }else{
                console.log(slider.index);
                  slider.index += 1;
                  slideTo(slider.index);
              }
            } else {
                $("#result").html("");
            }
        }else{
          if (Math.floor(div1_bottom) <= Math.floor(div2_top) && div1_top < div2_bottom) {
            if (slider.index <= 0) {
              slider.index = 0;
            }else{
            slider.index -= 1;
              slideTo(slider.index);
            }
    
          }
        }
    });

Answer 1

This might help.

From MDN documentation of scrollIntoView You can pass in option instead of boolean.

scrollIntoViewOptions Optional
A Boolean or an object with the following options:
{
  behavior: "auto"  | "instant" | "smooth",
  block:    "start" | "center" | "end" | "nearest",
  inline:    "start" | "center" | "end" | "nearest",
}

So you can simply pass parameter like this.

{
  const element = document.getElementById(id);
  element.scrollIntoView({ block: 'end',  behavior: 'smooth' });
}

This will cause the elements to scroll slow.