返回顶部按钮未贴右下角是因为未设置bottom和right值，或被父容器padding/margin干扰；应设bottom: 20px、right: 20px，加z-index: 1000，用window.scrollTo({top: 0, behavior: 'smooth'})实现平滑滚动，并扩展点击区域。
返回顶部按钮用 position: fixed 为什么没贴右下角？
常见现象是按钮悬在页面中间、随滚动偏移，或被遮挡——根本原因是没设 bottom 和 right，或者设了但值为 0 却被父容器的 padding 或 margin 干扰。固定定位只认视口，不继承父元素边距，所以必须显式写清楚数值。
-
bottom: 20px和right: 20px是最稳妥的起手值，留出安全间距 - 避免写
bottom: 0; right: 0，尤其在移动端，可能被虚拟键盘、地址栏或底部导航栏遮住 - 如果按钮图标用
img或svg，记得加display: block，否则默认行内元素会受基线对齐影响，视觉上“飘高”
按钮点击后滚动到顶部，window.scrollTo 怎么写才平滑？
直接 window.scrollTo(0, 0) 会生硬跳转，用户感知差；用 { behavior: 'smooth' } 是现代浏览器标配，但得确认兼容性是否够用。
- 推荐写法：
window.scrollTo({ top: 0, behavior: 'smooth' }) - IE 不支持
behavior，若需兼容，可降级为window.scrollTo(0, 0)，或引入轻量 polyfill（如scroll-behavior-polyfill） - 别用
document.body.scrollTop = 0或document.documentElement.scrollTop = 0，既不跨浏览器统一，也不支持平滑
按钮该不该加 z-index？什么时候会被盖住？
固定定位元素默认层级是 auto，一旦页面里有其他 z-index 显式设置（比如弹窗、导航栏、广告位），按钮就容易被压在下面。
- 保守做法：加
z-index: 1000—— 足够高于多数常规组件（导航栏常为100~500） - 别用超大值如
999999，后续维护时容易陷入“比谁更大”的死循环 - 如果按钮在某些页面消失，先检查是否被
overflow: hidden的祖先容器裁剪——fixed元素虽脱离文档流，但仍受其包含块的overflow影响（特别是 iOS Safari）
移动端点击区域太小，怎么安全放大又不破坏布局？
按钮本身可能只有 40×40px，但手指点击需要至少 44×44px 才符合可访问性标准。不能只调大宽高，否则会撑开固定位置或遮挡内容。
立即学习“前端免费学习笔记（深入）”；
- 用
padding扩展点击热区，再用transform: scale()缩小视觉元素，例如：padding: 12px; transform: scale(0.8); transform-origin: center; - 更干净的做法：保留按钮尺寸，用
::after伪元素扩展点击层，并设pointer-events: auto - 务必加
touch-action: manipulation，减少移动端 300ms 点击延迟
bottom 值的实际效果浮动。真要稳，得监听 resize 和 scroll，但大多数场景，bottom: 20px + 合理 z-index + 平滑滚动已足够可靠。 
