"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.
Opens WPIDE on
Code
<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">×</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 add this snippet
- Install WPIDE on your WordPress site (it is free) and open Code Snippets.
- Use snippet above adds it from the library in one click. Or copy the code into a new snippet with the same code type.
- It is added inactive: review the code and settings, then switch it on.