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?

To set up anchor links with scrolling and active link highlighting in Webflow when scrolling inside a div (not the whole page), you'll use section IDs, scrollable containers, and an interaction or custom code for the active state.

​

1. Structure Your Scrollable Section

​

• Wrap your content in a parent div that acts as your scrollable area.
• Set this div’s overflow to "scroll" or "auto", and give it a fixed height so scrollability is functional.
• Example: Name this div scroll-container.

​

2. Set IDs for Each Section

​

• Select each target section inside the scrolling div.
• In the Element Settings panel, assign a unique ID to each (e.g., section-1, section-2, etc.).
• These will be used as anchor destinations.

​

3. Create Anchor Links

​

• In your navigation, create Text Links or Buttons.
• For each, set the Link Settings → Page Section scroll target to the correct #id (e.g., #section-2).
• If the anchor link fails to scroll within the div but scrolls the page instead, see the JavaScript workaround in Step 5.

​

4. Highlight Active Link Using Interactions

​

Webflow’s native scroll-based highlight (Scroll Into View) does not work automatically inside a scrollable div, so use interactions:

​

• Go to Interactions panel and create a Page trigger → While scrolling in view.
• Select a section inside the scroll container.
• Choose scroll direction and set an interaction that changes the state of the corresponding nav link.
• Use custom states (like adding/removing a class such as active) to toggle highlights.
• Repeat for each section-link pair.

​

5. Optional: Smooth Scroll Within a Scrollable Div

​

If anchor links do not scroll the inner container properly, Webflow's native anchor scroll won’t help. Use a bit of JavaScript:

​

• Add this with Embed code in the Page Footer (inside Project Settings or a Page):

​

  Example snippet:

  ```javascript

  <script>

    const links = document.querySelectorAll('a[href^="#"]');

    links.forEach(link => {

      link.addEventListener('click', function(e) {

        e.preventDefault();

        const targetId = this.getAttribute('href').substring(1);

        const target = document.getElementById(targetId);

        const scrollContainer = document.querySelector('.scroll-container');

        if (target && scrollContainer) {

          scrollContainer.scrollTo({

            top: target.offsetTop,

            behavior: 'smooth'

          });

        }

      });

    });

  </script>

  ```

• Make sure .scroll-container matches the class of your scrollable div.

​

6. Style the Active Nav Link

​

• Create a combo class like .nav-link.active with your desired highlight style (e.g., bold color).
• The interaction should add this class when a section is in view, and remove it when out of view.

​

Summary

​

To enable in-div anchor scrolling in Webflow and highlight the current link:

• Wrap content in a scrollable div and assign unique section IDs.
• Set anchors to link to those IDs.
• Use scroll interactions or JavaScript to highlight the link when a section is in view.
• Webflow doesn’t support native anchor scrolling inside divs—so custom scroll behavior may be needed.