HIsheR
46 lines
2.4 KiB
TypeScript
46 lines
2.4 KiB
TypeScript
import { h } from '@ui-arch/frame';
|
|
import type { BackTopProps } from './types.js';
|
|
import { watchViewport } from './watch.js';
|
|
|
|
/*** 返回顶部：滚动越过阈值浮现，环形进度显示已滚比例，点击平滑回顶（尊重减少动效偏好） ***/
|
|
export function backTop(props: BackTopProps = {}): HTMLElement {
|
|
// —— 状态集中声明 ——
|
|
const threshold = props.threshold ?? 300; // 浮现阈值
|
|
const scroller = props.target ?? window; // 滚动容器
|
|
const el = props.target instanceof HTMLElement ? props.target : null; // 元素容器：null 表示整页
|
|
const ring = h('span', { class: 'ua-backtop-ring', 'aria-hidden': 'true' }); // 进度环（纯装饰）
|
|
const btn = h(
|
|
'button',
|
|
{ type: 'button', class: 'ua-backtop', 'aria-label': '回到顶部', onClick: () => jump() },
|
|
ring,
|
|
h('span', { class: 'ua-backtop-icon', 'aria-hidden': 'true' }, '↑'),
|
|
) as HTMLButtonElement;
|
|
|
|
/*** 当前滚动位置：整页用 window.scrollY，容器用 scrollTop ***/
|
|
const offset = (): number => (el ? el.scrollTop : window.scrollY);
|
|
|
|
/*** 可滚动总距离：不足 0 时按 0 处理，避免除零与负比例 ***/
|
|
const distance = (): number => (el ? el.scrollHeight - el.clientHeight : document.documentElement.scrollHeight - window.innerHeight) || 0;
|
|
|
|
/*** 同步浮现态与进度环：仅在阈值上下切换时才改类名，减少样式重算 ***/
|
|
const sync = (): void => {
|
|
const y = offset();
|
|
const total = distance();
|
|
btn.classList.toggle('is-visible', y > threshold); // 越过阈值才浮现
|
|
if (props.progress === false) return; // 卫语句：关掉进度环就不再算角度
|
|
const deg = total > 0 ? Math.min(Math.round((y / total) * 360), 360) : 0;
|
|
ring.style.background = `conic-gradient(var(--ua-color-accent-contrast) ${deg}deg, transparent 0)`; // 已滚比例用纯色弧
|
|
};
|
|
|
|
/*** 回顶：平滑滚动，用户偏好减少动效时直接跳转 ***/
|
|
const jump = (): void => {
|
|
const smooth = !window.matchMedia('(prefers-reduced-motion: reduce)').matches;
|
|
if (el) el.scrollTo({ top: 0, behavior: smooth ? 'smooth' : 'auto' });
|
|
else window.scrollTo({ top: 0, behavior: smooth ? 'smooth' : 'auto' });
|
|
props.onClick?.();
|
|
};
|
|
|
|
watchViewport(btn, scroller, sync); // 滚动 / 缩放后同步浮现态，节点脱离文档即自摘监听
|
|
return btn;
|
|
}
|