Scroll back to top do opposite

Question

When i'm scrolling down my functions work like they have too. But i want them to do the opposite when is scroll back to top. But how? This is what i got:

var $document = $(document)


$document.scroll(function() {
      if ($document.scrollTop() >= 50) {
          AnimateFunction();
      }
});

function AnimateFunction() {
  setTimeout(function() {
    $("#LOGO").animate({height: '180px'}, 1);
        $("ul").animate({top: '-14px'}, 1);
        $("li").animate({fontSize: '8pt'}, 1);
        $("#HB").animate({marginTop: '-10px'}, 1);
        $("#HB").animate({height: '29px'}, 1).animate({width: '26px'}, 1);
        }
      )};

I hope someone can help me!

score 0 · Accepted Answer · edited May 23 '17 at 11:48

For that you need to do a few things

So far, you are only detecting a scroll on the document and based on the scroll position you are running a function.

Now, you'd have to detect not only scroll but also scroll direction see this
you'd have to write another function that reverts the changes you did in your AnimateFunction function and call it when the scroll direction is upwards. In your new function you'd reset the values. i.e.

$("#LOGO").animate({height: 'originalHeight'}, 1);

Sample Code

var lastScrollTop = 0;
$(window).scroll(function(event){
   var st = $(this).scrollTop();
   if (st > lastScrollTop){
      AnimateFunction()
   } else {
      AnimateFunctionReverse()
   }
   lastScrollTop = st;
});

Scroll back to top do opposite

1 Answers1