[Support request] Page Scrolling

[IAN]

Hi,

What I am trying to set up is a one page site, so when you click on any of the navigations (contact etc), instead of linking to a full new page, it just scrolls the main page down to where the contact section is.

How do I do this?

[David]

Hi there,

you would build your navigation using custom links, the URL for each will point to an ID that will be used on your page e.g:

#about

Then on your page you need to assign that ID to the element you want it to jump to e.g:

<h2 id="about">About</h2>

Or if you are using GP Sections for example you can add that ID in the Sections settings.

If you want the page to smooth-scroll to that link when clicked you can do this:

https://docs.generatepress.com/article/smooth-scroll/

The smooth-scroll class can be added to the CSS Class when creating your menu items. If you can’t see this field, when editing the menu, click the screen options tab at the top of the screen and Check the CSS Classes checkbox.

[IAN]

I understand all this aside from this part..

“you would build your navigation using custom links, the URL for each will point to an ID that will be used on your page e.g:

#about”

How do I incorporate the ID into the url

(I am completely new to all this!)

[David]

No problems:

1. Dashboard > Appearance > Menus > Add new Menu
2. In the left hand side bar where you would see pages etc. Select Custom Links
3. In the URL field replace the http:// with the anchor link e.g #about
4. Add you menu label
5. Add to menu
Repeat step 3 and 5 for all links

Hope i understood correctly.

[IAN]

Ok so I have the smooth-scroll set in the menu, and have the label and the anchor link set #contact

I cant figure out how to set the custom id in the section on the page (I’m using sections). Now when I click on the menu Contact, the url changes in the browser to “…../#contact” but the page doesnt move anywhere

[Leo]

There is a custom ID field in settings of sections:
https://docs.generatepress.com/article/sections-overview/#opening-the-section-settings

[IAN]

yes and I have tried to put the id field “contact” and “#contact” in there and its not solving my issue

[Leo]

Instead of adding id=contact like you currently do:
https://www.screencast.com/t/smj7ikASWp

Simply add contact

[IAN]

Thank you so much for all your help!

[Leo]

No problem 🙂

[Author]

Posts