0

My question is probably very easy. How to loop this function? Now, scroll event works only once. I'm looking for solution how to enable else function (smooth scroll goes from red div to blue div)

Here is js code:

var o = true;

if (o === true) {
$('div').scroll(function () {
        if(o){
      $('div').animate({
          scrollTop: $("#red").offset().top
      }, 1000);
      o=false;
     }
});
} 

else {
$('div').scroll(function () {
        if(o === false ){
      $('div').animate({
          scrollTop: $("#blue").offset().top
      }, 1000);
      o=true;
     document.write(o);
    } 
});
}

HTML + CSS + JS: https://jsfiddle.net/g2jafoay/6/

What I'm looking for: when you scroll down, there is animation which take you to red div. So, I want to add animation which takes you to blue div after scroll up

TymDym
  • 3
  • 2
  • Can you please be more specific about what you want to achive? – Praveen Alluri Dec 05 '17 at 17:44
  • After adding if/else to one scroll event my function works like this: https://jsfiddle.net/g2jafoay/7/ What I'm looking for: when you scroll down, there is animation which take you to red div. So, I want to add animation which takes you to blue div after scroll up. – TymDym Dec 05 '17 at 18:03

1 Answers1

1

Remember when code is executed. That is: When it is reached.

We can simplify your code to

let a = true;
if (a) {
  functionA();
} else {
  functionB();
}

Obviously, when we reach this code, functionA is going to be executed. We never execute functionB, because, well, this code is never executed again.

Using this information, and looking at your code, we see that you are only attaching the first scroll handler, which has the behaviour of scrolling to the red div. The scroll handler is executed on every scroll event. If you would succeed in executing your code like it is now, you would end up with an infinite number of scroll handlers that try to scroll to the red div and an infinite number of scroll handlers that try to scroll to the blue div.

What we want to do is create only one scroll handler that has all the relevant logic inside the handler. Or, in other words, the decision is made in the scroll handler instead of the surrounding code.

let onRed = true;
$('div').on('scroll', () => {
  let scrollTarget;
  if (onRed) {
    scrollTarget = $('#blue');
  } else {
    scrollTarget = $('#red');
  }

  $('div').animate({
    scrollTop: scrollTarget.offset().top
  }, 1000);
  onRed = !onRed;
});
Sumurai8
  • 20,333
  • 11
  • 66
  • 100
  • Thanks for answer. I edited my question (for better specifying what I'm looking for). In your code user lost control on this element after scroll. I'm looking for something diffrent. After scroll to down, animation takes user to second div. When user scroll to up, animation takes user to the first div. – TymDym Dec 05 '17 at 18:16
  • Since this was not the original question, I won't be altering my answer. You can however find all the information of your second question [here](https://stackoverflow.com/q/24217087/2209007). – Sumurai8 Dec 05 '17 at 19:02
  • I know how to determine scroll direction, my question is different. When I scroll down, my function is executed. What is the solution to make move on top after another scroll? I think that the best way to make this is change var "o" inside function (when first function is executed, global var is changed from true to false so second function is ready to start) but how to do this? – TymDym Dec 05 '17 at 19:09
  • Remember that I linked you to a `wheel` event. Other than that, exactly like my answer uses `onRed`. – Sumurai8 Dec 05 '17 at 19:17