how to add smooth scroll to an anchor link?

[katerine]

Dear support team,
i have implemented an anchor link to a quick navigation on top of my web shop page. I would like to add a smooth scroll from “zu allen produkten” down to the #alleprodukte anchor. as it looks really strange changing so hardly.

How can I add this?

This is the relevant shop page
http://loveshamburg.de/wp-admin/post.php?post=11442&action=edit

And in the screenshot you can see what i have added in the code so far.

thanks so much for supporting,
katerine

Attachments:

You must be logged in to view attached files.

[Mohammad – SUPPORT]

Hi,

Please insert smooth-scroll-link class to link only and check.

-Mohammad

[katerine]

What does this exactly mean? I don’t really know, to be honest!

 

thanks once more!

katerine

[Rui Guerreiro – SUPPORT]

Hi,

Imagine that your link it’s the one below.

<a href="#"> My link </a>

You should change it to this one.

<a href="#" class="smooth-scroll-link"> My link </a>

-Rui

[katerine]

Hey Rui,
can you please show me the concrete code for that?
Obviously I don’t get it right now.
I have tried several time but failed.

http://loveshamburg.de/wp-admin/post.php?post=11442&action=edit
It needs to be added to “Zu allen Produkten”

Please let me know, that would be great.

Many thanks,
Katerine

Attachments:

You must be logged in to view attached files.

[David Martin – Support]

Hi,

Those login details are not working.

In your picture of the code, copy this code into your a links. class="smooth-scroll-link"

It would look like the below as Rui mentioned:

<a href="#" class="smooth-scroll-link"> My link </a>

Thanks.

[katerine]

This reply has been marked as private.

[David Martin – Support]

Hi,

Yes, that is now working fine for me!

I have got your smooth scroll working for you 🙂 I have only done one “Zu allen Produkten”.

The links need to look like this: (notice the href is just the ‘#id-name’ not yoursite.com/shop/#id-name)

Correct:

<a class="smooth-scroll-link" href="#alleprodukte">Zu allen Produkten</a>

Wrong:

<a class="smooth-scroll-link" href="http://loveshamburg.de/shop/#alleprodukte">Zu allen Produkten</a>

Thanks.

[katerine]

This reply has been marked as private.

[David Martin – Support]

Hi,

Please see my screenshot, I have added it to the first icon and link and it works perfectly.

You will need to do the other three icons and links, please copy the code for the first icon and link.

Thanks,
David.

Attachments:

You must be logged in to view attached files.

[katerine]

i don’t know why and what was the problem in the step before,
but now i can see it working! 🙂

Thank you so much.
Katerine

[David Martin – Support]

Great 🙂