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 …

  • <!DOCTYPE html> <html> <head> <title></title> </head> <body> <p>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 …</p> </body> </html>
  • Murray Adcock.
Journal permalink