22 lines
720 B
TypeScript
22 lines
720 B
TypeScript
"use client";
|
|
|
|
import { useEffect, useState } from "react";
|
|
|
|
export default function BackToTop() {
|
|
const [visible, setVisible] = useState(false);
|
|
|
|
useEffect(() => {
|
|
const onScroll = () => setVisible(window.scrollY > 600);
|
|
window.addEventListener("scroll", onScroll, { passive: true });
|
|
return () => window.removeEventListener("scroll", onScroll);
|
|
}, []);
|
|
|
|
return (
|
|
<button className={`back-to-top${visible ? " visible" : ""}`}
|
|
onClick={() => window.scrollTo({ top: 0, behavior: "smooth" })}
|
|
aria-label="返回顶部">
|
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M12 19V5M5 12l7-7 7 7" /></svg>
|
|
</button>
|
|
);
|
|
}
|