返回顶部按钮的CSS过渡必须用transform而非top或margin-top，因后者触发重排导致卡顿；应结合opacity与transform: translateY()实现GPU加速动画，并用requestAnimationFrame或IntersectionObserver优化滚动监听。
返回顶部按钮的 CSS 过渡必须用 transform，不是 top 或 margin-top
用 top 或 margin-top 做返回顶部按钮的显隐或位移，会导致浏览器频繁重排（reflow），动画卡顿明显，尤其在低端设备上。真正平滑的过渡只能靠 transform: translateY() —— 它只触发重绘（repaint），GPU 加速更可靠。
常见错误是这样写：
.back-to-top { opacity: 0; top: 100px; transition: top 0.3s, opacity 0.3s; }
.back-to-top.show { top: 20px; opacity: 1; }
正确做法是统一用 transform 控制位移 + opacity 控制透明度：
.back-to-top {
opacity: 0;
transform: translateY(20px);
transition: opacity 0.3s ease, transform 0.3s ease;
}
.back-to-top.show {
opacity: 1;
transform: translateY(0);
}
- 务必加
ease缓动，生硬的linear会显得机械 -
transform和opacity是仅有的两个可硬件加速的过渡属性，别混入height、left等 - 如果按钮固定在右下角，确保父容器没设
overflow: hidden，否则transform可能被裁剪
JavaScript 触发显示/隐藏时，别用 scroll 频繁改 class
直接监听 window.onscroll 并在回调里反复操作 DOM class，容易造成 scroll jank（滚动卡顿）。应该用 requestAnimationFrame 节流，或者更简单：用 IntersectionObserver 监听页面滚动位置是否超过阈值。
立即学习“前端免费学习笔记（深入）”；
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
轻量方案（兼容性好）：
let ticking = false;
function updateBackToTop() {
const show = window.scrollY > 300;
const btn = document.querySelector('.back-to-top');
if (show) {
btn.classList.add('show');
} else {
btn.classList.remove('show');
}
}
window.addEventListener('scroll', () => {
if (!ticking) {
requestAnimationFrame(() => {
updateBackToTop();
ticking = false;
});
ticking = true;
}
});
- 阈值
300建议按实际内容高度调整，太小会过早出现，太大则用户难发现 - 避免在
scroll里直接调用btn.classList.toggle('show', show)，每次都会强制同步计算样式 - 如果项目已用 IntersectionObserver，可用它监听一个 1px 高的占位元素是否滚出视口，逻辑更声明式
点击返回顶部的滚动行为要用 scrollIntoView 或 scrollTo，别用 animate 手写
自己用 setInterval 或 requestAnimationFrame 手写缓动滚动，容易出精度问题（比如停不准、跳变），也难处理用户中途拖拽滚动条的情况。现代浏览器原生支持平滑滚动。
最简可靠写法：
document.querySelector('.back-to-top').addEventListener('click', () => {
window.scrollTo({ top: 0, behavior: 'smooth' });
});
-
behavior: 'smooth'在 Chrome/Firefox/Safari（iOS 15.4+）均支持，无需 polyfill - 不要给
<a href="#top">加锚点跳转，它不触发scroll事件，且无过渡控制权 - 若需兼容老版本 Safari（'scrollBehavior' in document.documentElement.style，fallback 到
scrollIntoView({ behavior: 'smooth' })或简单scrollTop = 0
移动端点击区域和视觉反馈容易被忽略
按钮在手机上常因点击区域太小、无反馈而误操作失败。这不是“加个 hover”能解决的 —— 移动端没有 hover，必须靠 active 状态或 touch 事件模拟。
- 用
:active伪类缩放按钮（如transform: scale(0.95)），但要加transition: transform 0.1s，否则突兀 - 确保按钮最小尺寸 ≥ 44×44px（苹果人机指南）或 48×48px（Material），用
padding或min-width/min-height保证 - 避免把按钮放在
position: fixed的 footer 上方，iOS Safari 的地址栏收放会触发意外重绘，导致按钮闪动 - 如果按钮含图标（如
<svg>），记得设pointer-events: none在图标上，防止遮挡点击穿透
