You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
38 lines
1.3 KiB
38 lines
1.3 KiB
import { useEffect, useState } from 'react';
|
|
import { getLocaleFromPathname } from '@/i18n/utils';
|
|
|
|
// 全站「返回顶部」浮动按钮：滚动超过阈值后淡入，点击平滑回到页首。
|
|
// 固定在右下角、小巴适（Mascot）正上方，避免与可拖动的陪伴角色重叠。
|
|
export default function BackToTop() {
|
|
const locale = getLocaleFromPathname();
|
|
const [show, setShow] = useState(false);
|
|
|
|
useEffect(() => {
|
|
const onScroll = () => setShow(window.scrollY > 480);
|
|
onScroll();
|
|
window.addEventListener('scroll', onScroll, { passive: true });
|
|
return () => window.removeEventListener('scroll', onScroll);
|
|
}, []);
|
|
|
|
const label = locale === 'en' ? 'Back to top' : locale === 'hk' ? '返回頂部' : '返回顶部';
|
|
|
|
return (
|
|
<button
|
|
type="button"
|
|
className={`back-to-top${show ? ' is-visible' : ''}`}
|
|
aria-label={label}
|
|
title={label}
|
|
onClick={() => window.scrollTo({ top: 0, behavior: 'smooth' })}
|
|
>
|
|
<svg viewBox="0 0 24 24" width="22" height="22" aria-hidden="true" fill="none">
|
|
<path
|
|
d="M12 5 L5 13 M12 5 L19 13 M12 5 V20"
|
|
stroke="currentColor"
|
|
strokeWidth="2.2"
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
/>
|
|
</svg>
|
|
</button>
|
|
);
|
|
}
|
|
|