# How do I track scroll depth?

Capturing how far users scroll on your website is important to see if users are viewing all of the content on a page. The JavaScript example below measures the full length of a page, and then fires a custom **`Scroll Depth`** event by triggering Freshpaint’s client-side [`freshpaint.track()`](https://documentation.freshpaint.io/developer/freshpaint-sdk-reference#track) API every time a user scrolls a 25% of the full length (25%, 50%, 75%, 100%).

{% hint style="warning" %}
Scroll depth is calculated on the scroll location within the body element. If the content on your website is contained within a container element, then this event will not fire as expected.
{% endhint %}

```javascript
(function() {
    var quarters = 0;
    var scrollHeight, quarterHeight, scrollDistance, divisible, scrollPercent;
    document.addEventListener("scroll", function() {
        scrollHeight = document.documentElement.scrollHeight - window.innerHeight;
        quarterHeight = scrollHeight / 4;
        scrollDistance = window.pageYOffset || (document.documentElement || document.body.parentNode || document.body).scrollTop;
        divisible = Math.trunc(scrollDistance / quarterHeight);
        if (quarters < divisible && divisible !== Infinity) {
            scrollPercent = divisible * 25;
            freshpaint.track('Scroll Depth', {
                percent: scrollPercent
            });
            quarters++;
        }
    });
}());
```

{% hint style="info" %}
You can have an engineer install this script on your app, or you can use [Freshpaint's Tag Manager](https://documentation.freshpaint.io/admin-panel/events/advanced-options/tag-manager) to inject the script on your site. If you have any questions on how to achieve this, contact <support@freshpaint.io>
{% endhint %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://documentation.freshpaint.io/reference/faqs/how-do-i-track-scroll-depth.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.