Fixing Smooth Scrolling With Find On Page

The Problem: Smooth Scrolling Breaks Find-on-Page

Modern web design often employs smooth scrolling to create a more polished, native-app feel. The CSS scroll-behavior: smooth property makes anchor links glide to their targets rather than jump instantly. However, this well-intentioned enhancement creates a frustrating user experience when visitors try to find specific text on your pages.

When users press Ctrl+F (or Cmd+F on Mac) to search for text on a webpage, they expect immediate jumps between matching results. However, when scroll-behavior: smooth is applied to the html element, the browser applies smooth scrolling to ALL scroll actions--including the browser's built-in find feature.

"When I had this on CSS-Tricks, I had SO MANY reports of people annoyed that when they did 'find on page' and ⬆️⬇️ through the results, the smooth scrolling was slow and annoying." -- Chris Coyier, CSS-Tricks

Why This Matters for User Experience

From a user-centered design perspective, browser find functionality is a critical accessibility feature that many users rely on--especially those reading long-form content, researchers, and anyone looking for specific information quickly. By breaking this fundamental interaction, smooth scrolling creates friction where users expect instant, predictable behavior. The solution needs to preserve the aesthetic benefits of smooth scrolling for intentional navigation while respecting the browser's native search functionality.

To understand more about modern CSS animation techniques, including scroll-driven animations, see our guide on Introduction to CSS Scroll Driven Animations. For teams implementing sophisticated animations across multiple projects, our guide on Keyframes Tokens: Standardizing Animation Across Projects provides patterns for maintaining consistency while solving issues like this one.

The CSS-Only Solution: Using :focus-within

The elegant fix comes from leveraging the :focus-within pseudo-class selector. By moving the scroll-behavior declaration from the html element to html:focus-within, smooth scrolling only activates when focus is within the page--precisely when users interact with page elements through keyboard or mouse.

The Basic CSS Solution

html:focus-within {
 scroll-behavior: smooth;
}

This approach is remarkably simple yet effective:

• When a user clicks a link or interacts with an interactive element, focus enters the document and smooth scrolling activates for anchor navigation
• When the user opens the browser's find panel and navigates between results, no element has focus within the page, so scrolling happens instantly

As noted by Bramus Van Damme from Google Chrome Developer Relations, this solution elegantly separates user-initiated scrolling from browser tool interactions.

Combining with Reduced Motion Preferences

For a more inclusive solution that respects user accessibility preferences:

@media (prefers-reduced-motion: no-preference) {
 html:focus-within {
 scroll-behavior: smooth;
 }
}

This ensures users who have indicated a preference for reduced motion in their system settings get instant scrolling regardless of focus state, following WCAG guidelines for accessible motion design.

If you're working with a professional web development team, they can implement this fix alongside other UX optimizations to ensure your site delivers exceptional user experiences across all interaction patterns.

Handling Anchor Links: The Focus Timing Challenge

The :focus-within solution works beautifully for find-on-page, but it introduces a complication for traditional anchor links. When users click an internal link, both Chrome and Firefox briefly assign focus to the document and then remove it--often before the smooth scroll animation completes.

Animation Workaround

@keyframes smoothscroll1 {
 from, to {
 scroll-behavior: smooth;
 }
}

@keyframes smoothscroll2 {
 from, to {
 scroll-behavior: smooth;
 }
}

html {
 animation: smoothscroll1 1s;
}

html:focus-within {
 animation-name: smoothscroll2;
 scroll-behavior: smooth;
}

According to Christian Schaefer's research, this approach uses animation to ensure smooth scrolling persists for approximately one second after any interaction, covering the gap left by the browser's focus timing behavior.

The Tabindex Alternative

An alternative approach is to add tabindex="-1" to the target elements of your anchor links:

<h2 id="section-title" tabindex="-1">Section Title</h2>

When a user clicks an anchor link, the browser will focus on this element, triggering the :focus-within state and activating smooth scrolling. CSS-Tricks implemented this solution to ensure all headers that are scrolled to are also focusable.

However, this approach has a minor downside: the focus outline may appear on these elements. CSS can hide the outline while maintaining accessibility for keyboard users:

h2:focus {
 outline: none;
}

For teams building interactive experiences like Infinite All-CSS Scrolling Slideshows, understanding focus behavior becomes essential for maintaining smooth interactions across all user interaction patterns.

Sources

1. CSS-Tricks: Fixing Smooth Scrolling with Find-on-Page - Chris Coyier documents the core problem and solution using :focus-within
2. Der Schepp: Fixing Smooth Scrolling & Page Search - Christian Schaefer provides the animation workaround for browser focus timing
3. Bram.us: Smooth Scrolling and Find In Page - Bramus Van Damme explains the :focus-within solution with reduced motion considerations