How can I create a nav link in Webflow that navigates to the bottom of my home page from all pages?
TL;DR
- Assign a unique ID (e.g.,
bottom) to the section at the bottom of your homepage. - Create a navigation link using the full page URL with the anchor (e.g.,
/#bottom) to scroll to that section from any page.
To create a nav link in Webflow that scrolls to the bottom of your homepage, even when clicked from other pages, you’ll need to use an anchor link pointing to a specific element ID on the home page.
1. Add an Anchor to the Bottom of the Homepage
- On the home page, select the section or element at the bottom of your page that you want to link to.
- In the Element Settings panel, find the ID field and enter a unique ID (e.g.,
bottom). - This ID becomes the anchor target for your link.
2. Create a Nav Link with a Full URL + Anchor
- Go to the page where the nav link will appear (or the Symbol if it's a reusable Navbar).
- Add a Link Block or Text Link and select “URL” as the link type.
- Enter your home page URL followed by
#and the anchor ID. For example:/home#bottomif your homepage slug is/home, or just/#bottomif it’s the root page.
3. Handle Smooth Scrolling (Optional)
- Webflow only applies smooth scrolling behavior to same-page anchor links by default.
- If you're navigating from another page, the browser will jump to the anchor without animation.
4. Make Sure the Target Section Is Published
- Confirm that your home page section with the matching ID (
bottom) is visible and published. - Check for any conditional visibility or interactions that might prevent it from loading correctly.
Summary
To navigate to the bottom of your homepage from any page, assign a unique ID to the bottom section (such as bottom), and link to it using a full URL with an anchor like /home#bottom or /#bottom. This ensures proper redirection from other pages.