2

estoy realizando algunas pruebas para controlar el scroll en un div y no logro hacer lo siguiente: al hacer clic en un botón, quiero que el scroll de un div vuelva a cero. A continuación, les muestro brevemente lo que estoy haciendo:

introducir la descripción de la imagen aquí

si ahora presiono el botón Cancelar o Grabar, se cerrará esta pantalla y al volver a la misma desde acá:

introducir la descripción de la imagen aquí

cliqueando en NUEVA NOTICIA, quiero que la pantalla de carga de datos aparezca nuevamente seteada con el scroll en cero y no lo estoy logrando ya que me vuelve a aparecer con el scroll hacia el fondo de la pantalla, donde el usuario puede ver los botones para grabar o cancelar la edición.

El código que estoy intentando utilizar es el siguiente:

  <script>
    function TopeCero(){
        var elem = document.getElementById('VentanaDtos');
        elem.scrollTo = 0;
    }
</script>

Este es el código que dispara la función TopeCero:

<div>
<div x-data="{AltaNuevaNoticia: $wire.AltaNuevaNoticia}">
    <button onclick="TopeCero()" wire:click="VerForm()" class="mr-2 inline-flex items-center px-4 py-2 bg-gray-800 border border-transparent rounded-md font-semibold text-xs text-white uppercase tracking-widest hover:bg-gray-700 active:bg-gray-900 focus:outline-none focus:border-gray-900 focus:ring focus:ring-gray-300 disabled:opacity-25 transition">NUEVA NOTICIA</button>

    <section class="modal" x-cloak x-show="AltaNuevaNoticia = $wire.AltaNuevaNoticia" x-transition.duration.700ms>
        <div id="VentanaDtos" class="modal__container1">
            <div class="apartado margenInf15">

Haciendo un console.log(), puedo ver que llego hasta esa función, pero no se setea cero mediante el scrollTo que intento hacer sobre el div.

Desde ya, muchas gracias y quedo a la espera de vuestra ayuda.

1 respuesta 1

3

Cree un ejemplo con Javascript para esta función.

Al hacer click en el botón, el contenido del div scroll se mueve hacia arriba.

top: 0 indica la distancia o el espacio que es hacia arriba.

behavior: 'smooth' es para suavizar el scroll

let boton = document.querySelector(".boton");

  boton.addEventListener("click", TopeCero);

  function TopeCero() { 

    var elem = document.getElementById('scroll'); 

    elem.scrollTo({ top: 0, behavior: 'smooth' });

  }
.scroll {
display: block;
width: 100%;
height: 300px;
overflow-x: hidden;
overflow-y: auto;
padding: 10px 10px;
background: lightblue
}
<button class="boton">Scroll</button>
<BR><BR>
<div id="scroll" class="scroll">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>   
</div>

1
  • Muchísimas gracias, problema resuelto. el 1 ago. 2022 a las 12:39

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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