Scroll Depth Heatmaps

Pro Plan

Scroll heatmaps reveal how far visitors scroll down your pages and where they stop reading. Optimize content placement and page length.

What Are Scroll Heatmaps?

Scroll heatmaps show:

Metric	Description
Scroll depth	How far down visitors scroll
Drop-off points	Where visitors stop
Engagement zones	High attention areas
Fold line	What's visible without scrolling

Visual Representation

The heatmap uses colors:

Color	Meaning
Red	100% of visitors saw this
Orange	75%+ saw this
Yellow	50%+ saw this
Green	25%+ saw this
Blue	<25% saw this

Accessing Scroll Heatmaps

From Heatmaps Menu

1. Go to Analytics → Heatmaps
2. Select "Scroll" tab
3. Choose page to analyze
4. View scroll data

Toggle from Click View

While viewing click heatmap:

1. Click "Scroll" toggle
2. View switches to scroll data
3. Same page, different insight

Understanding the Display

Full Page View

Scroll heatmaps show:

• Entire page length
• Color gradient overlay
• Percentage markers
• Drop-off lines

Percentage Markers

Horizontal lines indicate:

Line	Meaning
100% line	Everyone reaches here (top)
75% line	75% of visitors scrolled here
50% line	Half of visitors reached
25% line	Quarter of visitors reached

Average Fold

Shows "the fold" - viewport bottom:

• Desktop average fold
• Mobile average fold
• Different per device

Key Metrics

Scroll Statistics

Metric	Description
Avg Scroll Depth	Average % of page scrolled
Bounce Scroll	% who didn't scroll
Full Scrollers	% who reached bottom
Scroll Time	Time spent scrolling

Viewing Metrics

1. Hover over any point
2. See percentage who reached
3. See time spent at section

The Fold

What Is The Fold?

The fold is:

• Bottom of initial viewport
• Content visible without scrolling
• Varies by device/browser

Fold Statistics

Metric	Insight
Above fold views	Content seen by all
Below fold rate	How many scroll
Critical content	Should it be above fold?

Device Differences

Fold varies significantly:

• Desktop: ~600-800px
• Laptop: ~500-700px
• Mobile: ~500-650px

Analyzing Pages

Long-Form Content

For articles and blog posts:

• Where do readers stop?
• Is content too long?
• Are images breaking up text?

Landing Pages

For conversion pages:

• Is CTA above fold?
• How many reach offer?
• Where do they drop off?

E-commerce Pages

For product pages:

• Do users see reviews?
• Are specs visible?
• Is buy button seen?

Drop-Off Analysis

Identifying Drop-Offs

Look for sudden color changes:

• Sharp transition = drop-off
• Gradual = natural scroll
• Early drop = content issue

Common Drop-Off Causes

Cause	Solution
Poor content	Improve engagement
Slow loading	Optimize images
Reached goal	Task completed
Distracting element	Remove or reposition
Content ends	Natural stopping point

Improving Scroll Depth

• Break up long text
• Add visuals between sections
• Use compelling subheadlines
• Create curiosity/tease content below

Filtering Options

Device Type

View by device:

• Desktop only
• Mobile only
• Tablet only
• All devices

Time Range

Select period:

• Today
• Last 7 days
• Last 30 days
• Custom range

Segments

Scale Plan

Filter by visitor type:

• New vs returning
• Traffic source
• Geographic region

Comparing Scroll Data

Before/After

Compare redesigns:

1. Select page
2. Choose "Compare"
3. Set date ranges
4. See improvement

Device Comparison

Side-by-side devices:

• Desktop vs mobile
• See behavior differences
• Optimize each

Page Comparison

Compare similar pages:

• Which engages more?
• What's different?
• Apply learnings

Content Visibility

Element Visibility

Scale Plan

Check specific elements:

1. Select element
2. See % who viewed
3. Average time visible

Visibility Report

Element	Visibility	Avg View Time
Hero section	100%	3.2s
Features	78%	5.1s
Testimonials	45%	4.8s
CTA bottom	32%	1.1s

Scroll Triggers

Attention Points

See where scrolling slows:

• Users reading content
• Engaging with section
• Considering action

Time per Section

Scale Plan

Measure engagement:

• Time spent per section
• Scroll speed variations
• Pause points

Best Practices

Content Placement

Based on scroll data:

• Most important = top
• CTAs = visible early
• Secondary content = lower

Page Length

Optimize length:

• Short for quick actions
• Long for engagement content
• Match user intent

Mobile First

Consider mobile scroll:

• Users scroll more on mobile
• But attention drops faster
• Prioritize critical content

Common Patterns

Good Scroll Pattern

• Gradual color change
• High bottom reach
• No sudden drops

Problem Pattern

• Sharp early drop
• Low bottom reach
• Cliff at specific point

Action Required

If seeing problems:

1. Identify drop-off point
2. Check content at that point
3. Watch sessions for context
4. Test improvements

Exporting Data

Screenshot

Export visual:

• Full page image
• Include overlay
• Add annotations

Data Export

Export statistics:

• CSV format
• Percentage data
• Section breakdown

Report Integration

Include in reports:

• Embed image
• Add to dashboard
• Share with team

Combining with Other Data

Click + Scroll

Use together:

• Scroll shows visibility
• Clicks show engagement
• Both give full picture

Sessions

Link to recordings:

• Watch scroll behavior
• Understand the "why"
• See individual patterns

Next Steps

• Explore movement tracking
• Click heatmaps
• Heatmap best practices