Memorise scroll position across page loads | CSS Tricks

A neat trick (now third hand) for storing the scroll position of a sidebar or other element in local storage, allowing you to keep it constant across pages without the user seeing it flash into place:

let sidebar = document.querySelector(".sidebar");

let top = localStorage.getItem("sidebar-scroll");
if (top !== null) {
  sidebar.scrollTop = parseInt(top, 10);
}

window.addEventListener("beforeunload", () => {
  localStorage.setItem("sidebar-scroll", sidebar.scrollTop);
});

Explore Other Notes

Older

The initial pitch for After Man

I'm a huge fan of Dougal Dixon's After Man and even managed to attend the 2018 (re)-launch party for the reprint of the book. That means I was lucky enough to see the original pitch […]
  • A neat trick (now third hand) for storing the scroll position of a sidebar or other element in local storage, allowing you to keep it constant across pages without the user seeing it flash into […]
  • Murray Adcock.
Journal permalink

Made By Me, But Made Possible By:

CMS:

Build: Gatsby

Deployment: GitHub

Hosting: Netlify

Connect With Me:

Twitter Twitter

Instagram Instragram

500px 500px

GitHub GitHub

Keep Up To Date:

All Posts RSS feed.

Articles RSS feed.

Journal RSS feed.

Notes RSS feed.