How can I fix a problem where anchor links with query strings are not working correctly when clicked on within the same page in Webflow?

Anchor links with query strings (e.g., #section?ref=abc) often don't work correctly in Webflow when used on the same page because browsers interpret anchor behavior separately from query strings.

1. Understand the Issue

• Standard anchor links like #section scroll correctly.
• When adding a query string, e.g., #section?ref=abc, the browser doesn't recognize the #section part properly for scrolling.
• Webflow’s default behavior does not handle scrolling when fragment identifiers include query strings.

2. Use JavaScript to Manually Scroll

To fix this, you'll need to use custom JavaScript to extract the anchor and scroll manually.

• Go to Page Settings (cog icon of the page).

• Scroll to the Before tag section.

• Paste a script like the following (just as a reference, remove backticks if pasting into Webflow):

  `window.addEventListener("DOMContentLoaded", function () {
      if (window.location.hash) {
          let hash = window.location.hash.split('?')[0]; // Strip query string
          let target = document.querySelector(hash);
          if (target) {
              target.scrollIntoView({behavior: "smooth"});
          }
      }
  });`

• This code runs on page load and scrolls to the correct element, ignoring the query string.

3. Use pushState Instead When Possible

If you're creating links dynamically (e.g., from buttons), consider:

• Separating anchor and query parts, or
• Using history.pushState({}, '', '?ref=abc#section') to preserve browser scroll behavior.

This ensures the anchor part works properly, and the query string is still present in the URL.

Summary

To fix anchor links with query strings in Webflow, use JavaScript to manually scroll to the anchor while stripping off the query string. Webflow and browsers don’t natively support scrolling to anchors when combined with query parameters.