How reverse animations made with scrollTop();

Question

function firstAnimation() {
  $('.etc(1)').fadeIn();
}
function secondAnimation() {
  $('.etc(1)').fadeOut();
  $('.etc(2)').fadeIn();
}

function thirdAnimation() {
  $('.etc(2)').fadeOut();
  $('.etc(3)').fadeIn();
}

function fourthAnimation() {
  $('.etc(3)').fadeOut();
  $('.etc(4)').fadeIn();
}


$(window).scroll(function() {
  if ($(this).scrollTop() > 150) {
    firstAnimation();
  }
  if ($(this).scrollTop() > 300) {
    secondAnimation();
  }
  if ($(this).scrollTop() > 450) {
    thirdAnimation();
  }
  if ($(this).scrollTop() > 600) {
    fourthAnimation();
  }

});

Guys, i'm using scrollTop() to animate a piece of my site, and i was wondering if i can reverse the animation if o scroll to the bottom, and not to the top.

I was searching but there isn't a scrollBottom in jquery.

Possible duplicate of this http://stackoverflow.com/questions/4326845/how-can-i-determine-the-direction-of-a-jquery-scroll-event — anpsmn, Apr 09 '15 at 20:20

score 0 · Answer 1 · answered Apr 09 '15 at 20:51

0

To scroll to the bottom of the document, try:

$(window).scrollTop($(body).height());

answered Apr 09 '15 at 20:51

Joshua Whitley

1,196
7
21

score 0 · Answer 2 · answered Apr 09 '15 at 21:04

0

$(window).load(function() {
  $("html, body").animate({ scrollTop: $(document).height() });
});

answered Apr 09 '15 at 21:04

Vadzim

296
1
3
11

score 0 · Accepted Answer · answered Apr 09 '15 at 21:29

First, set an additional requirement for each if statement to condition each event to a scroll range to prevent multiple events from being triggered. Second, add a .fadeOut() function to the next elements so that the effect is reversed when the user scrolls the opposite direction.

The code should look like:

function firstAnimation() {
  $('.etc1').fadeIn();
  $('.etc2').fadeOut();
}

function secondAnimation() {
  $('.etc1').fadeOut();
  $('.etc2').fadeIn();
  $('.etc3').fadeOut();
}

function thirdAnimation() {
  $('.etc2').fadeOut();
  $('.etc3').fadeIn();
  $('.etc4').fadeOut();
}

function fourthAnimation() {
  $('.etc3').fadeOut();
  $('.etc4').fadeIn();
}

$(window).scroll(function() {
  if ($(this).scrollTop() > 1500 && $(this).scrollTop() < 3000) {
    firstAnimation();
  }
  if ($(this).scrollTop() > 3000 && $(this).scrollTop() < 4500) {
    secondAnimation();
  }
  if ($(this).scrollTop() > 4500 && $(this).scrollTop() < 6000) {
    thirdAnimation();
  }
  if ($(this).scrollTop() > 6000) {
    fourthAnimation();
  }
});

Demo on JSFiddle

How reverse animations made with scrollTop();

3 Answers3