Apóyate con el método history.replaceState()
.
Cuando se pulse el botón, añade a la URI una cadena de consulta con el ID del <div>
(ejemplo.html?id=foo
) y luego recarga la página con el método location.reload()
.
Una vez recargada la página, revisa en la URI (location.href
) si hay algún ?
presente (es el caracter que determina el inicio de la cadena de consulta). De ser así, obtienes el ID que se encuentra en la cadena de consulta y lo utilizar para tomar el <div>
, y con ayuda del método scrollIntoView()
realizas el scrolling hacia el elemento. Finalmente, eliminas la cadena de consulta de la URI, de tal manera que, si el usuario recarga la página con F5 o CTRL + R, no va a realizarse el scrolling.
Un ejemplo:
let button = document.querySelector("#buttonID");
button.addEventListener("click", function(){
history.replaceState({}, document.title, location.href + "?id=foo");
location.reload();
}, false);
let newUri = location.href;
if (newUri.indexOf("?") > -1){
let divID = "#" + newUri.split("=")[1];
document.querySelector(divID).scrollIntoView({behavior: "smooth"});
let oldUri = newUri.substring(0, newUri.indexOf("?"));
history.replaceState({}, document.title, oldUri);
}
onclick
del boton, así solo lo realizará cuando lo pulses sin afectar a F5 o cargar de nuevo