Tengo una página de listado en mi aplicación. Cuando el usuario busque cualquier palabra, la lista se mostrará en consecuencia. Para lograr esto, estoy usando dos componentes (digamos búsqueda y listado). Cuando se encuentra el resultado de la búsqueda, la matriz se pasará a otro componente (es decir, componente de listado).
Ahora, el botón de desplazamiento hacia arriba no está en el componente de listado. Está en el componente de búsqueda. Estoy llamando a window.scrollTo(0,0) ¡Pero nada funciona!
Aquí está el código:
const scrollToTop = () => { window.scrollTo(0,0) } return ( <div className={`!overflow-y-auto container bg-satin-3 rounded-lg pt-3 pb-6 md:px-3 h-fit xl:pb-3 2xl:pb-2 lg:pb-4`} > <ComponentCalled to display the listing /> <IonButton onClick={() => scrollToTop()} className="float-right" > Scroll to Top </IonButton> )He reutilizado su código y en mi caso funciona perfectamente como se muestra a continuación:
scrollToTop = () => { window.scrollTo(0,0); };
return ( <div className="css" > <p>TOP</p> <ComponentCalled name="! I'm working"/> <button onClick={() => this.scrollToTop()} className="float-right" > Scroll to Top </button> </div> );