Aurora Admin v1.2.0: 79 components x 5 ends, doc site, contracts batch 1, playground, regression, deploy ready
This commit is contained in:
@@ -0,0 +1,51 @@
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import './BackToTop.css';
|
||||
|
||||
export default function BackToTop({ threshold = 400, showRing = true }) {
|
||||
const [visible, setVisible] = useState(false);
|
||||
const [progress, setProgress] = useState(0);
|
||||
const r = 20;
|
||||
const circumference = 2 * Math.PI * r;
|
||||
const offset = circumference * (1 - progress);
|
||||
|
||||
useEffect(() => {
|
||||
function onScroll() {
|
||||
const st = window.pageYOffset || document.documentElement.scrollTop;
|
||||
const max = document.documentElement.scrollHeight - window.innerHeight;
|
||||
setProgress(max > 0 ? st / max : 0);
|
||||
setVisible(st > threshold);
|
||||
}
|
||||
window.addEventListener('scroll', onScroll, { passive: true });
|
||||
onScroll();
|
||||
return () => window.removeEventListener('scroll', onScroll);
|
||||
}, [threshold]);
|
||||
|
||||
function toTop() {
|
||||
window.scrollTo({ top: 0, behavior: 'smooth' });
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
className={'aa-backtop' + (visible ? ' is-visible' : '') + (showRing ? '' : ' aa-no-ring')}
|
||||
role="button"
|
||||
aria-label="返回顶部"
|
||||
onClick={toTop}
|
||||
>
|
||||
{showRing ? (
|
||||
<svg viewBox="0 0 44 44">
|
||||
<circle className="aa-backtop-ring-bg" cx="22" cy="22" r="20" fill="none" strokeWidth="2" />
|
||||
<circle
|
||||
className="aa-backtop-ring-fg"
|
||||
cx="22"
|
||||
cy="22"
|
||||
r="20"
|
||||
fill="none"
|
||||
strokeWidth="2"
|
||||
style={{ strokeDasharray: circumference, strokeDashoffset: offset }}
|
||||
/>
|
||||
</svg>
|
||||
) : null}
|
||||
<span className="aa-backtop-arrow">↑</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user