How to Resolve Anchor Link Conflicts with Smooth-Scroll Scripts

Many website templates include a smooth-scroll script that improves the experience of navigating between sections on the same page. In some cases, this script may interfere with external links that contain anchor fragments, causing them to appear completely unclickable. This article explains why this happens and how to fix it.

Summary of the Issue

On websites using a template that includes a smooth-scroll jQuery script, links to external pages that contain a URL anchor (a "#" character followed by a section name, such as #california) may appear completely broken. Clicking the link does nothing. No new tab opens, and no navigation occurs.

This issue is not platform-specific. It can occur on any website where this type of smooth-scroll script is present, including sites built on HubSpot, WordPress, Webflow, or custom templates.

This issue can be confirmed by right-clicking the affected link and selecting "Open in new tab." If the page loads correctly this way, a JavaScript event listener is intercepting and blocking the click.

Root Cause

The smooth-scroll script works by listening for clicks on any link whose href contains a # character. When a matching link is clicked, the script calls event.preventDefault() to stop the default browser navigation, then looks for a matching anchor element on the current page to scroll to.

When the link points to an external page, such as a hosted privacy notice, that anchor element does not exist on the current page. The script finds nothing to scroll to, does nothing, and the user is left with an unresponsive link.

Right-clicking and opening in a new tab works because that action is handled natively by the browser and bypasses JavaScript event listeners entirely.

The specific code can be identified by inspecting the unclickable link in DevTools and reviewing any click handler scripts attached to the element. The responsible code typically looks like this:

$('a[href*="#"]:not([href="#"])').on("click", function(event) {
    event.preventDefault();
    var target = this.hash
      , $target = $(target);
    $target.length && $("html, body").animate({
        scrollTop: $target.offset().top - 100
    }, 600)
}),

Recommended Solution

The fix is a one-line change to the template JavaScript file. The selector needs to be updated to exclude external links so the smooth-scroll behavior only applies to same-page anchor navigation, which is its intended purpose.

The exact implementation will vary depending on the template, but the change typically looks like this:

Example Before:

$('a[href*="#"]:not([href="#"])')

Example After:

$('a[href*="#"]:not([href="#"]):not([href^="http"]):not([href^="//"])')

This change must be made by whoever manages the website template.

How to Verify the Fix

After the template JavaScript has been updated and any caches have been cleared:

1. Navigate to the live published page containing the affected link.

2. Click the link directly (do not right-click).

3. The linked page should open in a new tab and load correctly.

4. Confirm that smooth-scroll navigation elsewhere on the site still functions normally.

Additional Notes

This issue is not specific to privacy notice links. Any external link containing a # anchor on a website with this script pattern will be affected. Privacy notice subsection links are the most common compliance-related use case where this surfaces.

The fix does not affect same-page anchor navigation. Internal links that scroll to sections within the same page should continue to work exactly as before.

Captain Compliance-hosted privacy notices do not require any changes.