Custom link scrolling effect

Hi everyone,

I need some help. I’m building a onepage website, in which various section (i.e. “where we are”, “contacts”, etc.) are all in the same page. Now, if I insert in the primary menu (on top of the header) a custom link that points to one of those sections, with the format “domain.com/#section”, I go to the correct section with a scrolling effect. While if I put the same link inside other website sections, I do not have the scrolling effect (I go direct).

The question is: how to get the scrolling effect?

In my website, I have the same menu I put on the top inside a footer widget section, and I have a type-a service section, in which each service points to another website subsection. I would like to get the scrolling effect on both.

Thank you very much

Hello,

I don’t think that there is an easy way to do it, but you can check these links:


Please feel free to ask any other questions that you might have.

Kind Regards, Roman.

Thank you for the response!

I was thinking it was more easy, because the effect is already implemented in the top menu link (and also in the buttons, like call to action buttons).

Ok, I will do some experiments…

Thank you
Diego

You are welcome Diego!

Kind Regards, Roman.

I was thinking my request was not understood properly, so a simple question:

Why if I have a link in the primary menu in the format www.mysite.com/#section, clicking to the link I go to the section with a scrolling effect, while if I put the same menu in the footer widget section, I do not have the scrolling effect?

Thank you so much
Diego

Hello Diego,

Link should have the .smoothscroll class, please check this topic for more details:

Please check this WordPress Codex page if you want to learn how to add classes to your menu items:
https://codex.wordpress.org/WordPress_Menu_User_Guide

Kind Regards, Roman.

Thank you Roman! It was exactly what I was looking for.

I added the word smoothscroll in the CSS field of each menu link to have scrolling effect on the menu in the footer and the same word in Widget Class of type-a services to have the same effect on the services links also.

Greetings
Diego

1 Like