平滑滚动事件滚动

Question

I want to make a smooth scroll to the anchor which will be activated not by clicking, but just by an event scroll.

Moving the scroll itself will cause the scroll to go down to the section, and moving the scroll up will give the same return effect to the first section.

I'm trying to do it in jQuery, but I miss something. I manage to pull down to the bottom section, but the function blocks me. Sure there is some simple tip for it, but I do not know what to look for.

function transitionScroll() {
    if ($(window).width() <= 767) {

      let scrollWatch = window.pageYOffset;
      let positionOfElement = $("#small-carousel").offset().top;

      if ((scrollWatch <= positionOfElement) && (scrollWatch != 0)) {
        $([document.documentElement, document.body]).animate({ scrollTop: $("#small-carousel").offset().top }, 1000);

      }
    }

    $(window).resize(function () {
      if ($(window).width() <= 767) {

        let scrollWatch = window.pageYOffset;
        let positionOfElement = $("#small-carousel").offset().top;

        if (scrollWatch <= positionOfElement) {
          $([document.documentElement, document.body]).animate({ scrollTop: $("#small-carousel").offset().top }, 1000);

        }
      }
    });
  };

  transitionScroll();

  window.addEventListener('scroll', transitionScroll);

Answer 1

Finally, I wrote a working code.

https://codepen.io/toMuchMike/pen/JVWppq?editors=0011

let windowOnSecond = false;
let touchStart;
const positionOfFirst = $(".first-section").offset().top;
const positionOfSecond = $(".second-section").offset().top;


$(document).ready(function () {

  function doScrolling() {
  $(document).on('touchstart', function (e) {
   touchStart = e.originalEvent.touches[0].clientY;
});


$(document).on('touchend', function (e) {
   var touchEnd = e.originalEvent.changedTouches[0].clientY;
   if (touchStart > touchEnd + 5) {
      let scrollPosition = window.pageYOffset;

     //slide_down
     if ((scrollPosition = positionOfFirst) && (windowOnSecond === false)) {
      $("html, body").animate({ scrollTop: $(".second-section").offset().top }, 1000);
      windowOnSecond = true;
       console.log("DOWN");
      } 


   } else if (touchStart < touchEnd - 5) {
      let scrollPosition = window.pageYOffset;

     //slide_up
     if (scrollPosition <= positionOfSecond) {
      $("html, body").animate({ scrollTop: $(".first-section").offset().top }, 1000);
      windowOnSecond = false;   
       console.log("UP");
    }  
   }
});
};

  if ($(window).width() <= 767) {
    doScrolling();
  }

  $(window).resize(function () {
    if ($(window).width() <= 767) {
      doScrolling();
    }
  });

});

The website behaves as I want but for some reason the function loads with a delay, it can block scrolling for a second before the code is executed. The event that runs the code is the detection of the direction of touch as here: Determine vertical direction of a touchmove This is best seen on the touch screen, or the development tools in the mobile mode.