0

tengo una pagina con un boton Actualizar, quiero que cuando se de a ese boton se recargue la pagina y me realice un scroll a un div pero cuando sea un F5 no haga el scroll. El problema que tengo es que no se distinguir cuando se hace un F5 y cuando se hace un windows.location.reload() (desde el boton) pd// no puedo pasar valores por parametro GET

Alguna idea?

2
  • creo que es bastante sencillo, realizandolo dentro del evento onclick del boton, así solo lo realizará cuando lo pulses sin afectar a F5 o cargar de nuevo Commented el 2 nov. 2021 a las 11:24
  • necesito hacer la carga cuando se toque el boton
    – Minniek
    Commented el 2 nov. 2021 a las 11:32

1 respuesta 1

1

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);
}
1
  • Al final lo he hecho con un anclaje. Como te decía no puedo usar parametros
    – Minniek
    Commented el 3 nov. 2021 a las 12:11

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.