Want to make your website smoother and easier to navigate? This guide will show you how to create smooth scroll links that jump directly to sections on the same page, perfect for landing pages, portfolios, and one-page websites.
Setting Up Target Sections
First, navigate to the section where you want users to scroll when they click a link. Select the container that represents that section or content area. Open the container settings and go to the Advanced Settings tab.
In the advanced settings, navigate to ID and assign a unique ID name to this container (for example, "link1", "about", or "contact"). Repeat this process for all sections you want to make linkable, giving each one a unique ID.
Creating the Clickable Links
Go to any section or menu where you want to place your clickable links (like your navigation menu or call-to-action buttons). To link to a specific section, type a hashtag followed by the exact ID name you assigned to that section.
For example:
-
Link to section with ID "link1": #link1
-
Link to about: #about
-
Link to contact section: #contact
Important Guidelines
Make sure there are no spaces or special characters in your ID names or links. Keep them simple and use hyphens or underscores if needed. Repeat this linking process for all the sections you want to connect to clickable elements.
Final Steps
Save and publish your changes to make the smooth scrolling functionality live on your website. When visitors click these links, they'll smoothly scroll to the designated sections, creating a professional navigation experience that keeps users engaged and improves overall site usability.
This technique works perfectly for creating table of contents, navigation menus, and call-to-action buttons that guide users through your content seamlessly.