Here’s how to create a one page smooth scroll menu step by step.
Set an ID for Sections You Want to Scroll To
To scroll to a specific section (container), you first need to assign a unique ID to it. This ID is what your menu or link will target.
How to Add a Section ID in Elementor:
- Open your page with Elementor
- Select the section (container) you want to scroll to
- Go to the Advanced tab
- In the CSS ID field, enter a unique ID that starts with
pix_section_and describes the section’s purpose
For example: pix_section_features is a perfect ID for a features section.
Theme Options > Layout > Social Icons
How to Add a Section ID in WordPress Gutenberg Editor:
- Edit your page with the WordPress block editor
- Select the block you want to scroll to (e.g. Group, Heading, etc.)
- In the right sidebar, open the Advanced panel
- Enter in the HTML Anchor field a unique ID that starts with
pix_section_and describes the section’s purpose
For example: pix_section_features is a perfect ID for a features section.
WordPress Block Editor > Select Element > Advanced
Add Anchor Links to the Menu
If you want to add anchor links inside your page instead of the menu, check the note below
Once the section IDs are set, link them in your main navigation menu.
Steps:
- Go to WordPress Dashboard > Appearance > Menus
- Add a Custom Link for each section with ID
- URL: Add the section ID prefixed with # (e.g.
#pix_section_features) - Link Text: Add the label you want to show (e.g. “Features”)
- URL: Add the section ID prefixed with # (e.g.
- Click Add to Menu and save your changes
Appearance > Menus > Add Custom Links
Want to Add Anchor Links Inside the Page Instead of the Menu?
If you want to use Buttons or Links instead of the menu (Works for any element in your page that has a link field):
- In the Link field, enter the section ID starting with # (e.g.
#pix_section_features)
Link to Anchors from Other Pages
To scroll to a section from a different page, include the full URL + Anchor:
Example:
https://site.com/#pix_section_features
This ensures the correct page loads and scrolls to the right section.
The Result
You now have a fully functional one page scroll menu or internal navigation setup using smooth scrolling. Clicking a menu item or button will smoothly scroll to the targeted section.
You can see this feature in action in the Landing Demo of the pixfort theme.
Landing Demo
