Webflow sync, pageviews & more.
NEW

What could be causing a glitch on all pages with anchors in Webflow?

TL;DR
  • Verify each anchor link targets the correct ID and ensure the element is visible and not inside hidden components.
  • Adjust for fixed navbars by adding top spacing or using anchor offsets to prevent content from hiding behind the navbar.
  • Remove or disable any custom smooth scroll scripts to avoid conflicts with Webflow’s native scrolling.
  • Review and refine scroll-triggered interactions and check that custom code or third-party scripts aren't interfering.
  • For anchor links between pages, use custom code to ensure scrolling occurs after page load.

If you’re experiencing a glitch on all pages with anchor links in Webflow, several common causes could be disrupting the anchor link behavior or causing unexpected scroll/jump effects.

1. Missing or Misplaced ID Attributes

  • Anchor links (e.g., links that go to #section) must point to an element with a matching ID.
  • Check that the target element has the correct ID (e.g., section’s ID is section for a link to #section).
  • Webflow sometimes auto-generates IDs based on section names—if you rename them, verify the ID hasn’t changed or disappeared.

2. Fixed Navbar Without Anchor Offset

  • If you’re using a fixed-top navbar, anchor links may scroll the user behind the navbar.
  • To avoid this, add top margin/padding to the section you're linking to or use anchor offset using custom code or in-page scroll adjustments.
  • Alternatively, structure the layout so there's enough spacing above target elements.

3. Smooth Scroll Conflicts

  • Webflow has built-in smooth scrolling for anchor links.
  • If you’ve added custom smooth scroll JavaScript, it can conflict with Webflow's native behavior.
  • Disable your custom script or duplicate the project and remove custom code to test.

4. Interactions Triggered on Scroll

  • If you’ve set up scroll-based interactions, they may be triggered too early or late when jumping to anchor points.
  • Adjust the Scroll Timeline or Offset % in any relevant animations to better align with anchor behavior.
  • Ensure you're not linking to elements inside tabs, modals, or hidden sections, as anchor links won’t scroll correctly to those.
  • When possible, link only to visible elements on initial page load.

6. Custom Code Interfering With Anchors

  • Review any custom JavaScript or third-party libraries that modify the DOM or use scroll events.
  • Temporarily disable them to rule out interference with scroll behavior.
  • If you're linking to an anchor on another page (e.g., /about#team), Webflow can lose the anchor scroll on load.
  • You may need custom JavaScript to scroll to the anchor on page load after routing.

8. Page Load Behavior

  • Some glitches occur if a page hasn't fully loaded before trying to scroll to an anchor.
  • You can add a small delay in custom code before scrolling (e.g., via setTimeout()) to ensure the anchor scroll triggers after all assets load.

Summary

Anchor link glitches in Webflow are commonly caused by missing IDs, fixed navbars without offset, or conflicting custom scripts. Check your section IDs, layout spacing, and custom code to ensure clean scrolling behavior. If the glitch happens across all anchor links, start by testing without any custom code or interactions.

Rate this answer

Other Webflow Questions