TL;DR. Most SMB pages have a CTA in the hero section and another in the footer. Everything in between is a dead zone where the visitor has no visible action to take. Content Marketing Institute data shows 42% of visitors never scroll past the 50% mark. If your only CTA is at the bottom, nearly half your audience will never see it.
The Scroll Depth + CTA Visibility Map parses every CTA on a page, estimates the rendered page height, and maps each CTA to its viewport-visible scroll depth on both mobile and desktop. It flags CTAs buried past 75% scroll and highlights long stretches where no action is reachable.
Finds every CTA element, estimates its position by scroll depth on mobile and desktop, and flags CTAs buried past 75% scroll. Also surfaces long sections with no visible action.
Why this dimension matters
Scroll depth is where design intent meets user behavior, and they rarely agree. Designers build pages to be read top-to-bottom. Visitors scan, stop, and bounce. The median scroll depth on a landing page is roughly 50-60%, meaning the bottom third of most pages is seen by fewer than half the people who load them.
A CTA that only appears at 85% scroll depth is functionally invisible to the majority of your traffic. It doesn't matter how compelling the copy is or how bright the button color is. The visitor left before they got there. This isn't a design problem you can feel by eyeballing the page in your browser. You need a tool that measures where each CTA actually sits relative to how far people actually scroll.
Common failure patterns
- Hero CTA plus footer CTA, nothing in between. This is the single most common layout on SMB service pages. There's a "Get Started" button in the hero, then 2,000 pixels of testimonials, features, and FAQ with zero actionable elements. Visitors who scroll past the hero but don't reach the footer have no way to convert.
- CTAs that only appear on desktop but are pushed below the fold on mobile. A three-column pricing grid that sits at 40% scroll on desktop might land at 78% on mobile because the columns stack vertically. The audit checks both viewports independently.
- Sticky headers that cover the CTA on mobile. A fixed nav bar consuming 60px of viewport height means the first visible CTA is effectively 60px lower than the DOM position suggests. On a 667px mobile viewport, that's 9% of the screen already gone.
- Long-form content pages (3,000+ words) with a single CTA at the end. These pages get strong SEO traffic because they're comprehensive. But their conversion rate is near zero because the only action is 6,000 pixels down. Adding mid-content CTAs after every 800-1,000px of scroll is one of the highest-ROI fixes available.
How to fix it at the source
The goal isn't to plaster CTAs everywhere. It's to make sure a relevant action is visible at every major scroll checkpoint: 25%, 50%, and 75%. Three approaches work well together.
First, add inline CTAs after major content sections. A simple "Ready to get started? [Button]" block after the third testimonial or after the feature comparison is enough. Second, consider a sticky CTA bar on mobile that stays visible as the user scrolls. Keep it small (48px max height) so it doesn't block content. Third, audit long-form blog posts and add contextual CTAs where the content naturally supports them. If paragraph five explains why the problem is expensive, that's where the "See pricing" link belongs.
Thresholds that matter
| Signal | Target |
|---|---|
| First CTA scroll depth | Within first 25% of page height (above the fold on both mobile and desktop) |
| Maximum gap between CTAs | No more than 1,000px (roughly 1.5 viewport heights) without a visible CTA |
| CTA count on pages > 2,000px tall | Minimum 3 distinct CTA touchpoints |
| CTAs visible at 50% scroll | At least 1 CTA should be visible or recently passed at the median scroll point |
| CTAs buried past 75% scroll | Flag as warning. Fewer than 40% of visitors reach this depth. |
| Mobile vs desktop CTA parity | Every CTA visible on desktop must also be visible on mobile within 10% scroll-depth variance |
Example fix
Adding a mid-content CTA block after a long content section:
<!-- Insert after ~800-1000px of content (roughly 50% scroll on a typical page) -->
<div class="mid-cta" style="
text-align: center; padding: 2rem 1.5rem;
margin: 2.5rem 0; background: #f8f9fa;
border-radius: 8px; border: 1px solid #e5e7eb;">
<p style="font-size: 1.1rem; font-weight: 700; margin-bottom: .75rem;">
Like what you're reading?
</p>
<p style="font-size: .9rem; color: #4b5563; margin-bottom: 1rem;">
See how this applies to your site. Takes 30 seconds.
</p>
<a href="/pricing/" class="cta-button" style="
display: inline-block; padding: .75rem 1.5rem;
background: #f59e0b; color: #000; font-weight: 800;
border-radius: 8px; text-decoration: none;">
View Plans
</a>
</div>
When to run the audit
- After any landing page redesign, especially if the page height changed significantly.
- When a page with strong traffic has a conversion rate below 1%. The CTAs might be invisible to most visitors.
- Before launching a paid campaign to a specific landing page. You're about to pay for traffic. Make sure the page can convert it.
- When switching to a new template or theme. CTA positions shift when layout changes, and the shift is often worse on mobile than desktop.
Reading the output
Every finding is severity-classified. The playbook is the same across tools:
- Critical / red — same-week fixes. These block the primary signal and cascade into downstream dimensions.
- Warning / amber — same-month fixes. Drag the score, usually don't block.
- Info / blue — context only. Often what a PR reviewer would flag but that doesn't block merge.
- Pass / green — confirmation. Keep the control in place.
Every audit also emits an "AI fix prompt" you can paste into ChatGPT / Claude / Gemini for exact copy-paste code patches tied to your specific stack.
Related tools in this family
- Form Conversion Audit — once visitors reach a CTA, this audit checks whether the form behind it kills conversion with too many fields or poor mobile layout.
- About Page Conversion Audit — the about page is often the second-most-visited page and usually has zero CTAs. This catches that.
- Mobile Parity — compares the full mobile vs desktop experience, including CTA visibility differences.
- Pricing Psychology Audit — if scroll depth is fine but the pricing page still doesn't convert, the problem might be the pricing structure itself.
- Infinite Scroll Crawl Audit — for pages using infinite scroll or lazy loading, this audit checks whether content and CTAs are actually reachable.
Fact-check notes and sources
- Content Marketing Institute / Chartbeat (2013): Scroll-depth research showing ~42% of visitors don't scroll past the midpoint. Chartbeat data science blog
- Nielsen Norman Group: Scrolling and Attention — eye-tracking studies on how attention drops with scroll depth.
- Google Web.dev: Responsive design basics — viewport differences between mobile and desktop affecting CTA position.
- Baymard Institute: Mobile UX research on sticky elements — best practices for sticky CTA bars.
This post is informational and not a substitute for professional consulting. Mentions of third-party platforms in the tool itself are nominative fair use. No affiliation is implied.
