Home / Questions / 549391
Accepted
René Merlo
Asked: 2022-08-01 20:03:58 +0800 CST 2022-08-01 20:03:58 +0800 CST

scrollTo on a div

  • 772

I am doing some tests to control the scroll in a div and I am not able to do the following: when I click a button, I want the scroll of a div to return to zero. Here's a brief overview of what I'm doing:

enter image description here

If I now press the Cancel or Save button, this screen will close and when I return to it from here:

enter image description here

clicking on NEW NEWS, I want the data loading screen to appear again set with the scroll at zero and I am not achieving it since it reappears with the scroll towards the bottom of the screen, where the user can see the buttons to save or cancel editing.

The code I am trying to use is the following:

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

This is the code that triggers the ZeroTop function:

<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">

Doing a console.log(), I can see that I got to that function, but it doesn't get set to zero by the scrollTo I'm trying to do on the div.

Thank you very much in advance and I look forward to your help.

javascript

1 Answers

  1. Best Answer

    Create a Javascript example for this function.

    Clicking the button scrollmoves the content of the div up.

    top: 0indicates the distance or space that is up.

    behavior: 'smooth'it is to smooth the 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>

    • 3