What a scroll map shows
A scroll map is a website heatmap that shows how far down a page visitors scroll. The top of the page is coloured red, because every visitor sees it, and the colour cools toward blue as people leave. If 1,000 people open a page and 300 reach the pricing table, that band of the map is marked 30%.
Most tools print the share of visitors at each depth next to the colours, so you can read exact numbers. A scroll map is also called a scroll heatmap or a scroll depth map.
Scroll maps and other heatmaps
A scroll map is one of three common heatmaps, and it answers the question of reach. A click map shows what people act on, and a hover map shows where the mouse moves and pauses on computers. A scroll map adds which of those parts most visitors could see at all.
It is a good first map to open, because a section with no clicks may be unappealing or may simply sit below the point where most people stop. Our guide to website heatmaps covers all three types.
How a scroll map is built
A scroll map is built from the deepest point each visit reached on a page. A small script on the site records how far down the page each visitor’s screen got. The tool adds up many visits and works out, for every point on the page, what share of visitors saw it.
The line where the screen ends before anyone scrolls is called the fold. Everything above it is seen by close to 100% of visitors. Its position depends on the screen: a laptop shows more of the page than a phone, so the same section can sit above the fold on one and well below it on the other.
A few things can bend the numbers. Pages that load more content as you scroll grow longer during a visit. Sticky headers and pop-ups cover part of the screen. Pages that change between visits, such as a new hero image, shift every section below them. Good tools draw the map on one version of the page at a time for this reason.
What to look for on a scroll map
A scroll map is most useful for finding where attention drops and checking what sits there. These patterns come up often:
- A steady fade from top to bottom. This is normal for most pages, and it isn’t a problem on its own.
- A sharp drop at one point. Often this is a false bottom: a wide banner, a footer-like block or a large gap that makes the page look finished.
- Your main call to action sitting in a band that fewer than half of visitors reach.
- Key details, such as price, delivery times or the returns policy, placed below the point where most people stop.
- A band near the bottom that stays warmer than expected. Visitors who get that far are interested, so that content may deserve a higher spot.
Some visitors scroll up and down the same part of a page again and again. That repeated scrolling often means they are looking for something they can’t find, and some tools flag it as a frustration signal.
How to read a scroll map without fooling yourself
Most mistakes with a scroll map come from treating reach as interest. These checks help:
- Reaching a section isn’t the same as reading it. A fast scroll to the footer counts as 100% depth. Use the click map and a few session recordings to see what people did on the way down.
- A short scroll isn’t always bad. A visitor who clicks “Buy” near the top had no reason to go further. Compare the maps of visitors who converted and those who didn’t.
- Look at phones and computers separately. The fold sits in a different place on each, and a mixed map blurs both.
- Wait for enough views. A few hundred views of a page give a steadier picture than a few dozen.
- Check the date range. If the page changed, the old and new versions need their own maps.
From a scroll map to a test
A scroll map points to a likely problem, and an A/B test checks whether a fix helps. Suppose only 35% of visitors reach the reviews on a product page. You could move a short summary of the reviews near the top, then test the new layout against the old one.
Choose the main metric before you start, such as add to basket or form submits. Scroll depth on its own makes a weak goal, because a page can be scrolled further without converting better. Track it as a secondary metric, and compare the scroll map for each version to see whether people now reach the parts that matter.
Scroll maps in Cuttl
Cuttl’s scroll maps are part of the heatmaps in Journey Insights and show how far people read before they leave. You can filter them by device, channel, campaign, country, segment or A/B test variant, or by visitors who clicked a specific element. Heatmaps use all of a site’s traffic, even when recordings are sampled, and pages that share a template, such as product pages, are grouped together.
Each map shows one version of a page at a time, including past versions, so a redesign gets its own before and after views. Zone maps show which parts of a page come before a conversion. Repeated scrolling is one of the frustration signals Cuttl groups into issues, with the recordings attached.
In Web Experiments, scroll depth is in the metric library for tests, and a test or message can be triggered when a visitor reaches a set scroll depth. Every variant gets its own scroll map.
