Left Navigation keeps scrolling to the top

[ronyeh]

https://vexflow.github.io/examples/

Let's say I am browsing the examples, and then I click "Require 1", "Require 2", and then "SVG" in sequence.

It would be nice if the left navigation didn't scroll back to the top each time, so I could keep my place.

Maybe we can have hrefs point to #element-ids? Would that make it scroll down properly?

[Prospero23]

I think this can be done with some pretty simple javascript.

Something like the following should solve the issue I think.

<script>
document.addEventListener("DOMContentLoaded", () => {
  const nav = document.querySelector(".site-nav");
  const key = "navContainerScroll";
  const saved = sessionStorage.getItem(key);
  if (saved !== null) nav.scrollTop = +saved;

  nav.addEventListener("scroll", () => {
    sessionStorage.setItem(key, nav.scrollTop);
  });
}); 
</script>

This could just be placed in the base layout. Placing this at the bottom of the base layout seems to mostly work other than having a slight flicker before location is reset when going to new page. There should be an easy enough way to fix that, though.

[Prospero23]

After messing around some more with this, it seems that placing a modified version of that script that does not wait on the DOM Content to fully load at the bottom of the nav partial accomplishes what you want.

<script>
    const nav = document.querySelector('.site-nav');
    const key = 'navContainerScroll';
    const saved = sessionStorage.getItem(key);
    if (saved !== null) nav.scrollTop = +saved;
    nav.addEventListener('scroll', () => {
      sessionStorage.setItem(key, nav.scrollTop);
    });
</script> 

At least while I am testing on my local build, there does not seem to be any flickering.