Trying to get a nice animation on a scrollToTop?

Hey Dan cheers for this, it almost does exactly what I'm after apart from it constantly slides up and down once I go past 100px. The header is relative at the top of the page but after 100px it becomes fixed to the top and this might effect your code. I've tried playing around with it and adding a semi-colon to slideToggle but it still repeatedly slides up and down.

Check out .slideUp(), this is the same as slideToggle(), but it only slides up. jQ API: http://api.jquery.com/slideUp/ (you can find this under Effects > Sliding). This will only run once, and then the element is hidden.

This is basically the same as animating the CSS height property to 0 and then in the completion function hiding it altogether. But way easier :)

So try this:

var $logo = $('.header_above_nav');
$(document).scroll(function() {
    if ($(this).scrollTop() > 100) {
        $logo.slideUp()
    }
});

Marco, that is almost exactly what I am after! The only issue I have left is after scrolling down the page and back up 2 or 3 times it then refuses to slidebackup and leaves a blank space where I want it to consistently slide up or down following the rules I set in the code below...

var $logo = $('.header_above_nav');
$(document).scroll(function() {
    if ($(this).scrollTop() > 224) {
        $logo.slideUp();
    } else if($(this).scrollTop() < 500){
    $logo.slideDown();
}
});

Thanks again,

Adam

Hi Adam,

It's hard to say without having the rest of the code. Might have something to do with the fixed positioning.

Also; are you aware that your conditions are overlapping? For instance: everything above 224px scroll will trigger the first condition. So the second condition (<500) will ONLY run if scroll is lower than 224px. It works, but it's harder to predict the behavior of the code by just looking at it.

Sorry to be a pain Marco, I can't reveal the website I'm working on but there really isn't much code to this issue either. Basically the navigation bar is always fixed at the top and after 225px down the webpage the tagline above my navigation bar slidesUp and dissapears. I need it so that when I get back to the top of the page the tagline will slide back so that I won't have a gap between my content and my navigation. I've changed the code and tried this below, but when I'm so far down the page or try so many times it stops sliding back down.

var $logo = $('.header_above_nav');
$(document).scroll(function() {
    if ($(this).scrollTop() > 225) {
        $logo.slideUp();
    } else if($(this).scrollTop() < 225){
    $logo.slideDown();
}
});

You say your nav is fixed, and when the tagline disappears there's a gap between the content and the nav? So it's: tagline, nav, content, and when you scroll the tagline disappears, the nav slides up to fill the space and leaves a space between the content?

You probably have some margin or padding on top of the content to prevent the navbar from overlapping content? In the same condition that slides up the tagline, you could modify that margin.

That's the best I can do without a working example, I'm afraid. Good luck!

Not quite what I'm after but the code does work, thanks for this but I'm after a smooth transition as I scroll down the page like the on Dan has suggested.