Fadein animations and anchor links

[sarahdc]

Hey all-

I’m trying to create internal and external anchors links with smooth scroll and am having an issue. I’m not really sure why but when I do a traditional anchor link (internal), the page jumps way down past where I need it to. I’d like it to smooth scroll to an exact location but I’m wondering if its not working properly because I’m using a fade in animation.

You can see what I mean by going here:

http://www.puresanusa.com/products.html

In the navigation menu, you can click the link for soap. That should take you to the top of the product box for “green certified foam soap” but when clicked it goes past the top of that box.

Any hints on how I could get these anchor links to go to an exact post on the page? I’d love for this to implement a smooth scrolling as well but at this point, just ending in the right place would be fantastic :)

Thanks!
Sarah

[Shikkediel]

It’s actually positioned correctly since it will scroll the element to the top of the page. To account for the header, you’ll need some JavaScript. Here’s a small script that’ll do a smooth transition :

Link

Then instead of this line :

scrollTop: target.offset().top

You could use this :

scrollTop: target.offset().top-$('header').outerHeight(true);

[sarahdc]

That’s fantastic, thanks! So the link from soap works quite nicely now but none of the other anchor links work at all. Not sure why that is.

Also, I am going to need to make these links external anchors as well from the other pages. Will this same method work?

Thanks in advance,
Sarah

[Shikkediel]

The script makes a distinction between anchor and external links so you should be good on that. Not sure why so far only the soap link works, I’ll investigate…

[Shikkediel]

I think I see the issue – with “soap”, the link itself has id="soaps" while with the others the same term is repeated.

<li> <a href="#soap" id="soaps">Soaps</a> </li>
<li> <a href="#sanitizers" id="sanitizers">Sanitizers</a>

This means that there are double ids so it will apparently pick the first and scroll to the link itself instead of the matching anchor. If you try to keep the same format at the link that works, it should be functioning as intended. Hope that helps.

[Shikkediel]

By the way, did you change the regular size of the header compared to the “sticky” version meanwhile? As it currently stands with different sizes, this will no longer be correct :

scrollTop: target.offset().top-$('header').outerHeight(true);

Since the header’s not using padding or margin, it could have been a bit simpler to start with too :

scrollTop: target.offset().top-$('header').height();

[sarahdc]

Hi there :)

I didn’t change anything.

Well, the anchors are working but its not all smooth, like soaps. Its very jumpy. Thoughts on that?

You are a star for all the help!

S

[sarahdc]

I take that back, actually. They are working beautifully if you are using the main link to scroll down but if you use the links to choose one of the previous anchors, it’s jumpy and doesn’t “land” properly. Does that make sense?

[Shikkediel]

I didn’t change anything.

Okay, I must’ve not been looking at it well enough before. I thought they were the same size – getting the offset correctly will require some new code then, I’ll see what I can come up with.

Edit – this should work better :

scrollTop: target.offset().top-$('.isStuck').height()

Noticing the jumpy behaviour as well, not sure at the moment what’s causing that…

I’m seeing several elements with the same id in the header by the way, they are really meant to be unique identifiers.

[Shikkediel]

Ah, looks like the sticky menu is added after the script is executed so these links aren’t included. A solution could be to use a delegated event :

$(document).on('click', 'a[href*="#"]:not([href="#"])', function() {

Instead of :

$('a[href*="#"]:not([href="#"])').click(function() {

If you’d like to keep a bit of space between the header and the point to which is being scrolled, you could just subtract a few pixels :

scrollTop: target.offset().top-$('.isStuck').height()-10

[sarahdc]

That works a treat! Thanks so much for your assistance!

[Shikkediel]

Glad to lend a hand. :-)

[Author]

Posts