# "Continue Where You Left Off" on Long Articles

> Remembers how far a reader got in a long post (in their own browser only) and offers a "Continue reading" button when they come back, without cookies or accounts.

- Type: HTML
- Runs: Site-wide footer
- Category: [Frontend & Design](https://wpide.com/library/category/frontend/)
- Tags: reading, articles, localstorage
- Author: WPIDE Team
- Installs: 0
- Updated: 2026-10-28
- Page: https://wpide.com/library/frontend-resume-reading-position/

## Code

```html
<div class="wpide-resume" hidden role="status"><span>Continue where you left off?</span> <button type="button" class="wpide-resume-go">Continue reading</button> <button type="button" class="wpide-resume-close" aria-label="Dismiss">&times;</button></div>
<style>
.wpide-resume{position:fixed;left:50%;bottom:20px;transform:translateX(-50%);z-index:9990;display:flex;align-items:center;gap:10px;max-width:calc(100vw - 32px);padding:10px 14px;border-radius:10px;background:#1d2327;color:#fff;font-size:14px;box-shadow:0 8px 24px rgba(0,0,0,.25);}
.wpide-resume[hidden]{display:none;}
.wpide-resume button{border:0;border-radius:6px;background:#fff;color:#1d2327;font:inherit;font-weight:600;padding:6px 10px;cursor:pointer;}
.wpide-resume .wpide-resume-close{background:transparent;color:#fff;font-size:20px;line-height:1;padding:2px 6px;}
</style>
<script>
(function () {
    if (!document.body.classList.contains('single-post') || document.documentElement.scrollHeight < window.innerHeight * 3) { return; }
    var key = 'wpide-read-' + window.location.pathname, store;
    try { store = window.localStorage; store.getItem(key); } catch (e) { return; }
    var box = document.querySelector('.wpide-resume');
    var saved = parseInt(store.getItem(key) || '0', 10);
    if (box && saved > window.innerHeight * 1.5) {
        box.hidden = false;
        box.querySelector('.wpide-resume-go').addEventListener('click', function () { window.scrollTo(0, saved); box.hidden = true; });
        box.querySelector('.wpide-resume-close').addEventListener('click', function () { box.hidden = true; });
        setTimeout(function () { box.hidden = true; }, 12000);
    }
    var timer = null;
    window.addEventListener('scroll', function () {
        clearTimeout(timer);
        timer = setTimeout(function () {
            var y = window.pageYOffset;
            var nearEnd = y + window.innerHeight > document.documentElement.scrollHeight - 400;
            try { if (nearEnd) { store.removeItem(key); } else { store.setItem(key, String(Math.round(y))); } } catch (e) {}
        }, 400);
    }, { passive: true });
})();
</script>
```

## Notes

Uses the browser's localStorage, which is not sent to your server. Only single posts longer than about three screens are tracked.

## How to use it

Install the free WPIDE plugin (https://wordpress.org/plugins/wpide/), find ""Continue Where You Left Off" on Long Articles" in its snippet library and add it in one click; or create a new HTML snippet in WPIDE (or any code snippets plugin) and paste the code above. More snippets: https://wpide.com/library/