[SOLUCIONADO] Ir a un sitio concreto de la pagina despues de guardar datos

[AitorLopez]

Hola.

Necesito vuestra ay uda para conseguir lo siguiente:

Tengo un formulario con varios botones guardar.

Lo que quiero es que, despues de pulsar guardar, hace las operaciones oportunas, vuelve a la pagina donde estaba pero en lugar de que se situe en el principio, quiero que se situe donde estaba el boton guardar, si estaba abajo, pues abajo, si estaba en medio, pues en medio, etc.

Gracias.

Un saludo.

[ArturoGallegos]

Lo ideal es que hagas este proceso con ajax para que no tengas que recargar la pagina,

si te es inevitable colocale un ID al boton y cuando redirecciones agrega #id-del-boton al final de la URL

En automatico te enviara a esa posicion

Otra opcion es que cuando envies el formulario tambien envies la posición de la ventana

window.scrollY

Despues cuando recargues incluyas un script al final que contenga

Código Javascript:

window.scroll(0, posicionAnterior)
 

Francamente yo preferiria la opcion de AJAX o en su defecto un ancla en la URL por facilidad

[AitorLopez]

Hola. Muchas gracias por tu respuesta.

El tema del ajax está descartado por otros motivos.

He conseguido antes de pulsar el boton guardar, grabar en el localstorage bien el nombre del id o bien la posicion del scrooll como me has dicho.

Al volver a la pagina, bien con el id y .focus() o bien con window.scroll va a donde quiero.

El problema ahora es el efecto, es decir, pulso guardar, va al inicio de la pagina y un segundo despues se situa en el foco donde quiero (normalmente bien abajo).

Ahora la pregunta es si hay alguna forma de que ese segundo o bien no se vea y aparezca directamente ya en el foco sin ver el inicio de la pagina, o bien si se tiene que ver, que sea con algún efecto que "mole".

No se si me he explicado.

[Alexis88]

Puedes guardar el identificador del botón en una cookie o en almacenamiento local, leerlo al retornar a la página y desplazar la barra vertical hasta la posición de dicho elemento mediante el método .scrollIntoView().

Una manera más sencilla de darle solución a esto sería si guardaras los datos mediante una petición asíncrona (AJAX), de tal forma que la ventana no se recarga y el usuario puede seguir navegando mientras la información se almacena.

Código Javascript:

var form = document.querySelector("#id_del_formulario");
 
form.addEventListener("submit", function(event){
    event.preventDefault();
 
    let self = this,
        ajax = new XMLHttpRequest(),
        data = new FormData(self);
 
    ajax.open("POST", self.action, true);
    ajax.send(data);
    ajax.addEventListener("load", function(){
        this.status == 200 && alert("Datos guardados");
        self.reset();
    });
}, false);
 

En esencia, el código anterior envía los datos del formulario hacia la dirección establecida en el atributo action del formulario (en donde se van a guardar los datos). Una vez que dicha operación se ha completado, se muestra un mensaje de alerta avisándole al usuario que los datos se han guardado para, finalmente, dejar los campos del formulario en blanco. Todo ello se realiza sin la necesidad de recargar la ventana, por lo cual ya no es necesario tomar la posición del botón del formulario para hacer el scroll hacia su ubicación.

EDITO: Estuve escribiendo esto antes de que se publicaran las respuestas que ahora veo. Si dices que no puedes emplear AJAX, te sugiero tomar la primera opción que menciono.

[Panino5001]

Esto es viejo, pero quizá sirva:
http://www.forosdelweb.com/f13/volve...4/#post4637477

[Triby]

No sé si mole, pero podría servir aplicar "smooth scroll" al documento con CSS para que no "brinque de golpe". Referencia: https://developer.mozilla.org/es/doc...croll-behavior

Código CSS:

html, body {
    scroll-behaviour: smooth;
}
 

[ArturoGallegos]

@triby creo que la propiedad CSS mecionada no tiene soporte para Safari, algo lastimosamente requerido en muchos ambitos/proyectos

ya que yo propuese usar scroll en javascript para evitar que brinque tan feo tenemos esta forma de implementar

Código Javascript:

window.scroll({ top: scrollTo, behavior: 'smooth' });
 

Por lo que he visto tiene mejor compatibilidad

[Triby]

@ArturoGallegos, parece que el problema será el mismo con Javascript, Safari no soporta smooth behaviour: https://caniuse.com/element-scroll-methods

[ArturoGallegos]

Ya valio madres, paren todo se cancela el proyecto.

Ni hablar Triby tienes toda la razón, me fui con la finta en la tabla de compatibilidad... hoy he aprendido algo nuevo.

[AitorLopez]

Hola. Gracias a todos por vuestras respuestas.

Me sirvió el behavior: 'smooth' aunque no funcione en Safari

Dicho esto, no me gusta el efecto, buscaré por ahí algún plugin que haga un fade o algo parecido.