如何解決反應自動滾動問題？

Question

我正在使用 react 來創建我的項目。 我遇到的問題是，如果我滾動到任何頁面，然后滾動到 go 另一個頁面，我最終會在頁面頂部的同一位置。 我該如何解決這個問題？

Answer 1

您可以使用Window.scrollTo或element.scrollIntoView function 來解決問題

 useEffect(() => {
    window.scrollTo(0, 0);
  }, []);

或者如果你想要滾動行為

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

但這不是在每個組件中執行此操作的最佳方法，因此您可以使用自定義掛鈎來實現並在任何地方使用它

import react, { useEffect } from "react";

const useTop = function () {
  useEffect(() => {
    window.scrollTo(0, 0);
  }, []);
};

export default useTop;

點擊查看演示

讓我們從element.scrollIntoView function 和用例中找出它，如果我們需要滾動到一個元素但我們不知道視口中元素的高度和寬度，這就是為什么我們只使用 element.scrollIntoView function 來解決那。 我們可以使用element.getBoundingClientReact function 從視口手動計算元素的高度和寬度，但我們需要大量的樣板代碼來實現

通過使用自定義，鈎子可以在需要時使用滾動事件

const useTop = function () {
      const scroll = (ref) => {
        ref.current.scrollIntoView({ behaviour: "smooth" });
      };
    
      return { scroll };
    };
    
    export default useTop;

點擊查看演示

Answer 2

嘗試這個：

componentDidMount() {
window.scrollTo(0, 0)
}

useEffect(() => {
window.scrollTo(0, 0)
}, [])