User Experience

What is Scroll Depth?

A metric that measures how far down a page visitors scroll before leaving.

Definition

Scroll depth (also called scroll tracking or scroll percentage) measures how far down a webpage visitors scroll, typically expressed as a percentage of the total page length. For example, a 50% scroll depth means the visitor scrolled halfway down the page. It is tracked by monitoring the scroll position of the browser viewport relative to the total page height and is often reported at thresholds like 25%, 50%, 75%, and 100%.

Scroll depth can be measured as a single session metric (how far one visitor scrolled on one visit) or as an aggregate across many sessions to identify content consumption patterns. Advanced scroll tracking also captures scroll velocity (how fast users scroll, which can indicate skimming versus reading) and scroll pauses (where users stop scrolling, which suggests areas of interest). Combined with other behavioral data, scroll depth paints a detailed picture of how visitors consume your page content.

Why It Matters

Scroll depth reveals whether visitors actually consume your content or abandon it partway through. A page might have a low bounce rate and decent session duration, but if most visitors only see the top 25%, the content below that point is wasted effort. Understanding scroll patterns helps you place important information, CTAs, and conversion elements where visitors actually see them.

Scroll depth data also exposes content structure problems. A sharp drop-off at a specific point on the page often indicates a content quality issue, visual clutter, or a misleading above-the-fold section that doesn't deliver on its promise. Conversely, high scroll depth on certain pages reveals content formats and topics that genuinely hold audience attention. Use these insights to replicate successful content patterns and restructure pages with poor scroll engagement.

How to Measure

Implement scroll depth tracking using tag management tools with built-in scroll depth triggers or custom analytics event tracking with the Intersection Observer API. Track scroll milestones at 25%, 50%, 75%, and 100% as discrete events. Average scroll depth varies by page type: blog posts typically see 50-60% average scroll depth, while landing pages aim for 70% or higher since visitors need to see the CTA and key selling points.

For deeper analysis, segment scroll depth data by traffic source, device type, and landing page. Mobile visitors often scroll further on the same content because the viewport height is smaller, but they may also abandon faster on content that isn't optimized for mobile reading. Compare scroll depth with time on page, high scroll depth with low time indicates skimming, while moderate scroll depth with high time suggests deep reading. Track scroll depth trends over time to measure the impact of content restructuring and layout changes.

How Racoons.ai Helps

Racoons.ai captures and analyzes your full page layout, evaluating content structure, visual hierarchy, and CTA placement from top to bottom. Our AI identifies sections that may lose visitor attention and recommends improvements to content flow, helping you keep visitors engaged throughout the entire page.

Best Practices

Design pages with a clear content hierarchy that rewards scrolling. Use compelling subheadings, visual breaks (images, pull quotes, dividers), and varied content formats to maintain interest throughout the page. Front-load the most important information but give visitors a reason to keep scrolling, tease upcoming sections or use progressive disclosure to reveal deeper content as they move down the page.

Place CTAs based on scroll depth data, not assumptions. If your analytics show that most visitors scroll to 60% but your CTA is at 85%, most visitors never see it. Consider using multiple CTA placements: one above the fold for high-intent visitors and another at the natural engagement peak identified by your scroll data. Avoid false bottoms, design elements that make the page look like it ends when there is more content below. Use visual cues like partially visible content at the viewport edge to signal that more content awaits below the fold.

Put this knowledge into action

Understanding the metrics is the first step. Racoons.ai uses AI to analyze your website and tell you exactly what to improve, in plain English.

Try the full analysis free

Frequently Asked Questions

Related Terms