How can I set up anchor links and scroll to specific sections in Webflow, with the right div having overflow scroll, and the corresponding link highlighted when a section is in view?
- Wrap target sections in a scrollable div with a class and set overflow to scroll.
- Assign unique IDs to each section and create anchor links pointing to them.
- Add custom JavaScript to smoothly scroll the container to target sections on click.
- Use JavaScript to monitor scroll position and toggle an active class on links based on visible section.
To implement anchor links, have a scrollable div, and highlight links based on scroll position in Webflow, follow these steps:
1. Set Up Scrollable Section Container
- Wrap all the target sections (the ones you want to scroll between) inside a div block.
- Set this div’s style to overflow: scroll or overflow-y: scroll.
- Give this div a specific class name (e.g., “scroll-container”) and optionally give it a fixed height if needed.
2. Assign Unique IDs to Target Sections
- Click each section or div block that you want to scroll to.
- In the Element Settings Panel, set a unique ID (e.g., “section-1”, “section-2”).
- These IDs will be used in the hrefs of your anchor links.
3. Create Anchor Links
- Add link blocks or text links for each target section.
- Set the link’s href to the corresponding section ID with a hash (e.g., “#section-1”).
- This sets up the anchor navigation.
4. Adjust Anchor Behavior for Scrolling Div
By default, anchor links scroll the entire page. To make anchor links scroll within the scroll-container, you need to:
- Use custom JavaScript that:
- Intercepts the anchor link click.
- Finds the target section inside the scrollable div.
- Uses
scrollIntoView()or setsscrollTopmanually on the container.
Example inline logic (no raw code): In Webflow, you can add a custom code snippet inside the <body> tag in Page Settings, or inside an Embed component. This script should:
- Prevent default anchor click.
- Get the position of the section inside
.scroll-container. - Smooth scroll the
.scroll-containerto that position.
5. Highlight Active Anchor Link While Scrolling
Webflow’s built-in Interactions and Scroll Triggers work on page scrolling, not scrollable divs. To highlight links based on custom scroll container, do the following:
- Add custom JavaScript that:
- Listens to the scroll event on
.scroll-container. - Checks which section is in view using
getBoundingClientRect(). - Toggles a class (e.g.,
active) on the corresponding nav link.
6. Create Active Link Styles
- In Webflow Designer, define a class like
activeon your menu links. - Style it (e.g., bold text, color change).
- Your custom JS should add/remove this class based on scroll position.
Summary
To scroll inside a specified container and highlight links:
- Use a scrollable div with overflow: scroll.
- Assign unique IDs to each section.
- Use anchor links that match those IDs.
- Add custom JavaScript to:
- Scroll inside the div container.
- Monitor which section is visible.
- Highlight link corresponding to that section.
Webflow alone doesn’t natively track scroll position inside custom containers for interactions, so you’ll need JavaScript for full control.