smooth scroll an event scroll

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

`$([document.documentElement, document.body])` is bizarre doesn't look like it should work. jQuery scrolling plugins, core, and jQuery UI selector is usually `$('hml, body')`. Good luck and May the Scrool be with you — zer00ne, Apr 10 '19 at 19:07
@zer00ne it's the same thing, essentially, just using an array of elements: http://api.jquery.com/jQuery/#jQuery-elementArray — Heretic Monkey, Apr 10 '19 at 20:48
Note that `transitionScroll` attaches an event handler to the `resize` event. And you've got that running every time the user scrolls. So you're going to have a potentially large number of event handlers firing when the user resizes their browser... — Heretic Monkey, Apr 10 '19 at 20:52
@HereticMonkey Now I see, no quotes so not a selector string -- it's an Array literal of `html` and `body`. — zer00ne, Apr 10 '19 at 20:56
Well, I've improved this code. Halfway I managed to get the result. Now, after executing the code in the first "if" the code loops and the window goes from section to section. Any ideas where this behavior comes from? I think I should somehow stop or slow down the execution of the code after the condition is met. https://codepen.io/toMuchMike/pen/JVWppq?editors=0011 — Mike, Apr 15 '19 at 19:24
I noticed that this loop disappears when the scroll event (no matter if I use js or jQuery) is in the comment, and I run the function from the click. Could the scroll event cause this behavior? — Mike, Apr 15 '19 at 20:09

score 0 · Answer 1 · answered Apr 21 '19 at 18:09

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.

smooth scroll an event scroll

1 Answers1