window.scrollTo() 在離子反應中無法正常運行

Question

我的應用程序中有一個列表頁面。 當用戶搜索任何單詞時，列表將相應顯示。 為此，我使用了兩個組件（比方說搜索和列表）。 當找到搜索結果時，數組將被傳遞給另一個組件（即列表組件）。

現在，滾動到頂部按鈕不在列表組件上。 它在搜索組件上。 我打電話給window.scrollTo(0,0)但沒有任何效果！

這是代碼：

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>

)

Answer 1

我已經重用了你的代碼，在我的例子中，它工作得很好，如下所示：

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>
);

https://stackblitz.com/edit/react-ts-vk1fle?file=index.tsx