freefire
1535577eac
用顶栏/主栏高度令牌消除 sticky 首滚空走，面包屑叠到中栏上方，公开页增加回顶浮钮。 Co-authored-by: Cursor <cursoragent@cursor.com>
40 lines
1.1 KiB
TypeScript
40 lines
1.1 KiB
TypeScript
"use client";
|
|
|
|
import { useEffect, useState } from "react";
|
|
import { ArrowUp } from "lucide-react";
|
|
import { scrollBehavior } from "@/lib/motion";
|
|
|
|
const SHOW_AFTER = 400;
|
|
|
|
/**
|
|
* 公开站长页回顶：滚过阈值后右下角浮现。
|
|
* 短页自然不出现；帖子移动端底栏时抬高，避免叠住操作条。
|
|
*/
|
|
export default function BackToTop({
|
|
liftForMobileBar = false,
|
|
}: {
|
|
liftForMobileBar?: boolean;
|
|
}) {
|
|
const [visible, setVisible] = useState(false);
|
|
|
|
useEffect(() => {
|
|
const onScroll = () => setVisible(window.scrollY > SHOW_AFTER);
|
|
onScroll();
|
|
window.addEventListener("scroll", onScroll, { passive: true });
|
|
return () => window.removeEventListener("scroll", onScroll);
|
|
}, []);
|
|
|
|
if (!visible) return null;
|
|
|
|
return (
|
|
<button
|
|
type="button"
|
|
className={`j13-back-top j13-toast-in${liftForMobileBar ? " is-lifted" : ""}`}
|
|
onClick={() => window.scrollTo({ top: 0, behavior: scrollBehavior() })}
|
|
aria-label="回到顶部"
|
|
>
|
|
<ArrowUp size={18} strokeWidth={2.25} aria-hidden />
|
|
</button>
|
|
);
|
|
}
|