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:
If I now press the Cancel or Save button, this screen will close and when I return to it from 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.