Animate Scroll Links

[GZA]

How can update this script so that it animates to the top of the page when i click .logo #top link in my header? Currently it’s only animating links that are below the header.

‘

‘

http://dpaste.com/0P4M36P

[Shikkediel]

This should work, as far as I can tell:

if (target.length) {

  if (target[0] == '#top') var gap = 0;
  else gap = 100;

  $('html, body').animate({
    scrollTop: target.offset().top-gap
  }, 1000);
}

Needed an edit, I believe…

[GZA]

That didnt work. When i click the logo it still goes straight to the top of the page without animating

[Shikkediel]

Best suggestion I had without seeing an actual demo.

[GZA]

I’ve put it on codepen

http://codepen.io/gza/pen/ygjpBy

[Shikkediel]

There was no element with id="top" to scroll to…

<header id="top">

codepen.io/anon/pen/jyxZbB

[GZA]

Ah simple mistake! i was putting it inside the containing element. Thanks.

[GZA]

Is there a way to add a smooth transition to the navbar also?

for example – if you scroll down to the bottom 150px you’ll see it just snaps down just after it affixes to the top.

[Shikkediel]

Have a look at the earlier link, adding a fade is a small adjustment. Gets a bit more complicated beyond that.

[Author]

Posts