Why is my anchor link scrolling to the wrong place?

Anchor links that don't land on the right section are a frustrating but common issue in Webflow. The problem almost always comes down to one of a handful of causes — most of which are straightforward to fix.

Fixed Navbar Overlapping the Target

This is the most common cause. If your site has a fixed or sticky navbar, it sits on top of the content when the browser scrolls to the anchor. The section loads behind the navbar, making it look like the scroll stopped too high.

Fix: Add top padding to the target section equal to or greater than the navbar height. Alternatively, use a CSS scroll-margin-top value on the target element:

#your-section {
  scroll-margin-top: 80px;
}

Replace 80px with your navbar's height. This tells the browser to stop that many pixels higher than the element's top edge.

Duplicate or Missing IDs

If two elements share the same ID, the browser scrolls to the first one it finds — which may not be the section you intended. Check the page for duplicate IDs by inspecting the element settings in the Designer.

Similarly, if the ID on the link doesn't match the ID on the target section exactly (including case), the scroll won't work at all or will land on the wrong spot.

Fix: Ensure every section ID is unique across the page and that the link's anchor exactly matches the target ID.

Animations Affecting Layout

If the target section uses entry animations (fade-in, slide-up) that are triggered on scroll, the section's layout may shift after the page loads. The browser calculates the scroll position based on the initial layout, but the animation changes the element's position or visibility afterward.

Fix: Either remove the animation on anchored sections, or use JavaScript to recalculate the scroll position after the animation completes.

Dynamic Content Changing Page Height

On CMS template pages, content above the target section may load dynamically or have variable height. If images or embeds load after the initial scroll calculation, the target's position shifts.

Fix: Use JavaScript to scroll to the anchor after all content has loaded:

<script>
  window.addEventListener('load', () => {
    const hash = window.location.hash;
    if (hash) {
      const target = document.querySelector(hash);
      if (target) target.scrollIntoView({ behavior: 'smooth' });
    }
  });
</script>

Webflow's Smooth Scroll Setting

Webflow has a built-in smooth scroll option in Site Settings under the Integrations tab. If this conflicts with custom scroll behavior or JavaScript-based scrolling, it can cause unexpected results. Try disabling it and implementing scroll behavior through your own code if needed.

Checklist for Debugging

1. Verify the target element has the correct, unique ID
2. Check for a fixed navbar and add scroll-margin-top
3. Test on the published site, not in the Designer
4. Remove animations on the target section temporarily to isolate the issue
5. Check browser console for JavaScript errors that might interfere

Anchor link scroll issues are almost always layout-related rather than broken links. Work through the checklist above and the fix is usually obvious.