Tengo una barra de navegación vertical en el lado izquierdo de mi página como esta:

 $active = basename($_SERVER['PHP_SELF'], ".php"); echo '<ul id="navbar"> <li id="page1" class="'; echo ($active == 'page1') ? 'active' : ''; echo '" onclick="navbarScrollSetItem(this.id)"> <a href="page1.php">Page 1</a> </li> <li id="page2" class="'; echo ($active == 'page2') ? 'active' : ''; echo '" onclick="navbarScrollSetItem(this.id)"> <a href="page2.php">Page 2</a> </li> <li id="page3" class="'; echo ($active == 'page3') ? 'active' : ''; echo '" onclick="navbarScrollSetItem(this.id)"> <a href="page3.php">Page 3</a> </li> ...

Configuré el desbordamiento para desplazarse y lo necesito para recordar/mantener la posición de la barra de desplazamiento entre páginas, así que probé esto:

 function navbarScrollSetItem(navbarLiId) { let navbar = document.getElementById('navbar'); let navbarLi = document.getElementById(navbarLiId); navbar.scrollTop = (navbarLi.offsetTop); localStorage.setItem('scrollPos', navbar.scrollTop); console.log('navbarLiId: ' + navbarLiId + ' scrollPos: ' + navbar.scrollTop); }

Y en carga he intentado esto:

 function navbarScrollGetItem() { let navbar = document.getElementById('navbar'); let scrollPos = localStorage.getItem('scrollPos'); navbar.scrollTop = scrollPos; }

Pero desafortunadamente no está funcionando, está haciendo básicamente lo mismo que esto:

 navbar.scrollIntoView({behavior: "auto", block: "start"});

¡Lo que realmente necesito es que la barra de desplazamiento mantenga exactamente la misma posición en la página como si la página nunca hubiera cambiado!

¿Puede alguien ayudarme por favor?