[英]Scroll to top on browser back button click react
每次 URL 在我的項目中發生變化時(以及頁面重新加載時),我都需要滾動到頂部。
一切正常,但瀏覽器后退按鈕出現問題。 即使路徑名發生變化,頁面沒有按預期滾動到頂部,它也適用於所有其他情況(頁面重新加載和常規鏈接導航)。
我試圖通過為后退按鈕創建一個自定義掛鈎來解決這個問題,但它並沒有按照我想要的方式運行。 我還嘗試了很多其他的東西,但對於瀏覽器后退按鈕似乎沒有任何作用
import { useEffect, useState } from "react";
import { useLocation } from "react-router-dom";
const ScrollToTop = () => {
const { pathname } = useLocation();
const useBackButton = () => {
const [isBack, setIsBack] = useState(false);
const handleEvent = () => {
setIsBack(true);
};
useEffect(() => {
window.addEventListener("popstate", handleEvent);
return () => window.removeEventListener("popstate", handleEvent);
});
return isBack;
};
const backButton = useBackButton();
console.log(backButton);
useEffect(() => {
window.scrollTo(0, 0);
}, [pathname, backButton]);
useEffect(() => {
window.onbeforeunload = () => {
window.scrollTo(0, 0);
};
}, []);
return null;
};
export default ScrollToTop;
我認為這里不需要beforeunload
事件,但無論如何都會包含它。 您可以使用useNavigationType
掛鈎來明確檢查 POP 事件類型,而不是為“popstate”事件使用事件偵聽器。
注意:將window.addEventListener
用於beforeunload
事件,這樣您就不會污染/改變window
object。
例子:
import { NavigationType, useLocation, useNavigationType } from "react-router-dom";
const useBackButton = () => {
const navType = useNavigationType();
return navType === NavigationType.Pop;
};
const useScrollToTop = () => {
const { pathname } = useLocation();
const isPop = useBackButton();
const scrollToTop = () => window.scrollTo(0, 0);
useEffect(() => {
scrollToTop();
}, [pathname, isPop]);
useEffect(() => {
window.addEventListener("beforeunload", scrollToTop);
return () => {
window.removeEventListener("beforeunload", scrollToTop);
};
}, []);
};
用法:
function App() {
useScrollToTop();
return (
...
);
}
這是我使用 React hooks 的解決方案:
const [showsScrolBtn, setShowScrolBtn] = useState(false);
useEffect(() => {
const handleButtonVisibility = () => {
window.pageYOffset > 300 ? setShowScrolBtn(true) : setShowScrolBtn(false);
};
window.addEventListener("scroll", handleButtonVisibility);
return () => {
window.addEventListener("scroll", handleButtonVisibility);
};
}, []);
{
showsScrolBtn && (
<div
id="scrolToTop"
onClick={() => {
window.scrollTo({
top: 0,
left: 0,
behavior: "smooth",
});
}}
style={{
position: "fixed",
bottom: "60px",
right: "60px",
color: "gray",
textAlign: "center",
cursor: "pointer",
fontSize: "4em",
lineHeight: 0,
textDecoration: "none",
}}
>
Click To Move Top
</div>
);
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.