Scroll heatmaps reveal how far visitors scroll down your pages and where they stop reading. Use them to decide what belongs near the top of a page and how long a page can reasonably be.
What Are Scroll Heatmaps?
A scroll heatmap is a depth view of a single page. Instead of plotting individual clicks, it paints horizontal bands over a screenshot of the page, colored by the share of pageviews that reached each depth. The top of the page is reached by everyone, so it runs hottest; the color cools as you go down and fewer people scroll that far.
| Element | What it tells you |
|---|---|
| Depth bands | The share of views still present at each depth |
| Depth rulers | At 25%, 50%, and 75% of the page, the percent of views that reached that point |
| Average depth marker | The average depth visitors reach on this page |
Color Scale
The overlay uses the same continuous thermal ramp as the click heatmap, relabeled for scroll. The legend below the heatmap marks Fewer views at one end and More views at the other. Warmer bands near the top mean most visitors saw that content; cooler bands lower down mean fewer people scrolled that far.
Accessing Scroll Heatmaps
Heatmaps are a paid feature, available on Pro and above.
Open Heatmaps
Select Heatmaps from the sidebar, or open a website's dashboard and choose the Heatmaps tab.
Pick a page
The left panel lists pages that have collected data. Use the search box to filter, then click a page to load it.
Switch to Scroll
Above the heatmap, use the Click / Scroll toggle to switch to the scroll depth view for the same page.
Understanding the Display
Depth Bands
The scroll heatmap overlays a screenshot of your page with a smooth vertical gradient. The band color encodes the share of pageviews that scrolled to at least that depth, so the overlay fades from hot (everyone) at the top to cold (few) further down.
You can:
- See the actual page content beneath the overlay
- Zoom in and out with the on-screen controls, or pinch on touch devices
- Drag to pan once you're zoomed in
Depth Rulers
Dashed rulers at 25%, 50%, and 75% of the page height are each labeled with the reach at that point, for example "62% of views reached here." These give you concrete read points without hovering.
Average Depth
A marker shows the average depth visitors reach on this page, integrated from the scroll distribution. It is a quick gauge of how far down the typical visitor gets before they leave or stop.
The header above the heatmap summarizes the data, showing the number of pageviews in the selected window alongside the scroll depth distribution.
Time Range
A period selector lets you scope the heatmap to a recent window: 7 days, 30 days, 90 days, or 6 months. Longer windows are available on higher plans; locked options show a lock icon and the plan needed to unlock them.
Full Page View
Click Full Page to open the page in a full-screen inspector. The scroll bands and rulers track the screenshot as you zoom and pan, which is useful for long pages where the inline view is cramped. Press Escape or Exit to return.
Analyzing Pages
Long-Form Content
For articles and blog posts:
- Where do readers stop?
- Is the page too long for the audience?
- Are images and subheadings keeping people moving down the page?
Landing Pages
For conversion pages:
- Is the call to action above the point where most visitors stop?
- How many people reach the offer further down?
- Where does the drop-off concentrate?
E-commerce Pages
For product pages:
- Do visitors reach reviews and specs?
- Is the buy button within the reach of most views?
Reading Drop-Offs
A sharp transition from a warm band to a cold band means a lot of visitors stopped at that depth. A gradual fade is normal scrolling. An early cliff usually points to a content or layout problem at that point on the page.
Common causes of an early drop-off:
| Cause | What to try |
|---|---|
| Weak content | Improve the opening and break up dense text |
| Slow loading | Optimize heavy images and scripts |
| Task complete | The visitor got what they came for, which can be fine |
| Distracting element | Reposition or remove it |
Improving Scroll Depth
- Break up long text into shorter sections
- Add visuals between blocks of copy
- Use clear, compelling subheadings
- Tease content below to create a reason to keep scrolling
Best Practices
Content Placement
Use the depth data to order the page: most important content and primary calls to action near the top, secondary content lower down.
Page Length
Match the length to the intent. Keep pages short for quick actions; longer pages are fine when the content earns the scroll and the depth data shows people are reaching the bottom.
Mobile vs Desktop
Scroll behavior differs by device. Capture a page over a meaningful window and compare it against your click and session data to understand how visitors actually move through it.
Combining with Other Data
Click and Scroll
Use both modes on the same page. Scroll shows what content was seen; clicks show what drew action. Together they give a fuller picture of how a page performs.
Sessions
When a depth pattern raises a question, watch individual session recordings for the same page to understand the "why" behind where people stop.