What Is a Scroll Map?
A scroll map is a specific type of heatmap that measures vertical engagement on a web page. Rather than showing where users click, a scroll map shows how far down the page each user scrolls before leaving. The output is typically a colour-coded overlay where the top of the page appears red or orange (seen by nearly everyone), fading to blue and then dark grey further down the page (seen by progressively fewer visitors). The percentages at each depth show the exact proportion of your audience that reaches each section.
Scroll depth data is critical for two reasons. First, it tells you how much of your content is actually being consumed. A page can have an impressive average session duration while most visitors are sitting idle on the first screen and never reading the content you worked hard to produce. Second, it reveals whether important elements like testimonials, pricing tables, or call-to-action buttons are positioned where your audience will see them, or buried below the point where the majority have already left.
Scroll maps are generated by tools like Microsoft Clarity, Hotjar, FullStory, and Mouseflow. These tools inject a tracking script that records the maximum scroll depth achieved for each session and aggregates the data into a visual map. In Google Analytics 4, scroll depth can also be tracked through the built-in scroll event, which fires when a user reaches 90% of page height, though this is less granular than a dedicated heatmap tool.
One important nuance is the difference between desktop and mobile scroll maps. Mobile users on South African sites often scroll more aggressively, because they are consuming content in a single long column rather than a wider desktop layout. A scroll map filtered to mobile users alone often shows a notably different engagement pattern from the desktop view, and both should be examined when making layout decisions.
Scroll Map In Practice
A Cape Town tour operator builds a long-form service page listing their packages, with pricing at the bottom and a contact form below that. Scroll map data reveals that only 22% of visitors scroll past the first three package descriptions, meaning 78% of visitors never see the pricing or the contact form. The team restructures the page to include a summary pricing table in the top half and moves the main contact CTA above the fold. Enquiry form submissions increase by 34% in the following month with no change in traffic.
Another practical application is optimising blog posts. A Johannesburg media brand uses scroll maps to understand that most readers of a 2,500-word article abandon reading at around the 40% mark. Armed with this data, the editorial team starts placing mid-article CTAs at the 35% scroll depth, resulting in a 45% increase in newsletter sign-ups from organic blog traffic. Scroll maps, used alongside session recordings and click tracking, give content teams the evidence to make layout decisions based on actual user behaviour rather than assumptions about how people read online.
FAQ
What percentage of users typically scroll below the fold?
Research consistently shows that between 50% and 75% of users scroll below the initial viewport on content-heavy pages. On landing pages and homepages, this figure often drops to 30% to 50%. Scroll map data from your own site is far more reliable than industry benchmarks, as scroll depth varies significantly by page type, traffic source, and device type.
How does a scroll map help with CTA placement?
A scroll map shows exactly what percentage of visitors reach the scroll depth where your call-to-action button sits. If your primary CTA is at 60% scroll depth but only 35% of visitors reach that point, the vast majority never see the button. Moving the CTA to a point reached by 80% of users can dramatically improve click-through rate without changing the offer or design.