How can I create a nav link in Webflow that navigates to the bottom of my home page from all pages?
TL;DR
- Add an element with a unique ID (e.g., footer-anchor) at the bottom of your homepage.
- Set your nav link to a full or relative URL pointing to that ID (e.g., /#footer-anchor), then publish and test from any page.
To create a nav link in Webflow that scrolls to the bottom of your home page, even from other pages, you need to link to an anchor ID on the home page using a full URL with a hash.
1. Add an Anchor Element to the Bottom of Your Home Page
- Go to your homepage in Webflow.
- Add a “Div Block” or any element where you want the scroll to end (typically in the footer).
- Assign it a unique ID in the Settings panel (e.g.,
footer-anchor). - Do not include the hash (#); just enter
footer-anchorin the ID field.
2. Create the Nav Link in the Navbar
- Select the Navigation Link you want to direct to the bottom of the home page.
- In the element settings (gear icon), choose “URL” as the link type.
- Enter the full path to your home page with the anchor, like:
- If your website is live:
https://www.yourdomain.com/#footer-anchor - If you're working in Webflow Preview/Designer:
/#footer-anchor - Double-check the domain and page path if your home page is not the root URL (e.g.,
/home/#footer-anchor).
3. Publish and Test
- Publish your site to test the link across all pages.
- Clicking the nav link from any page should now scroll to the bottom of the home page.
Summary
To scroll to the bottom of your home page from any page, add an anchor with a unique ID at the bottom, then link to /#anchor-id using a URL link in the nav. Use a full URL for live sites or a relative URL for internal links during development.
