scrollBy()更适合按钮驱动的步进滚动，因其基于当前位置相对位移，每次调用仅按指定偏移累加，天然契合“点一下滚一段”逻辑；而scrollTo需手动维护绝对坐标，易在连点、异步或重排后失准。
用 scrollBy() 实现按钮触发的精确上下滚动
直接调用 window.scrollBy() 是最轻量、兼容性最好的方式，适合点击按钮后滚动固定像素（比如每次滚 50px）。它不依赖容器结构，也不需要计算 DOM 高度，但要注意：滚动是相对当前位置的增量操作，连续点击会叠加。
-
scrollBy(0, -50)向上滚动 50px；scrollBy(0, 50)向下滚动 50px - 若页面已到顶部再向上滚，浏览器自动截断，不会报错
- 在 Safari 或旧版 Edge 中，
behavior: "smooth"可能不生效，建议降级为behavior: "auto"或省略该参数 - 避免在按钮上重复绑定事件——每次点击都调用一次
scrollBy()即可，无需维护偏移量变量
对指定容器做局部上下滚动（如公告栏）
当滚动区域不是整个页面，而是某个 <div> 内部内容时，必须操作该元素的 scrollTop 属性。CSS 要求该容器设 overflow-y: auto 且有固定高度，否则 scrollTop 无效或始终为 0。
- 获取容器引用：
const container = document.getElementById("news-list") - 向上滚动一行：
container.scrollTop -= container.clientHeight / 3（除以 3 是为视觉舒适，可按实际行高调整） - 向下滚动时，需限制上限：
container.scrollTop = Math.min(container.scrollTop + step, container.scrollHeight - container.clientHeight) - 滚动到底部后，继续点“向下”按钮不应出界，否则
scrollTop会卡在最大值，UI 失去响应感
jQuery 的 .animate() 滚动容易踩的坑
jQuery 的 $("html, body").animate({ scrollTop: target }, 300) 看似简洁，但在现代项目中隐患明显：它同时操作 html 和 body，而不同浏览器默认滚动容器不同（Chrome 用 documentElement，Firefox 用 body），导致动画跳变或失效。
- 不要写成
$("html,body").animate(...)—— 这会触发两次动画，造成抖动 - 应先判断：
const scrollEl = document.scrollingElement || document.documentElement，再用原生scrollTo() - 如果坚持用 jQuery，只选其一：
$("html").animate(...)或$("body").animate(...)，并在各浏览器中实测 - 移动端 iOS 上，
animate()对scrollTop的支持不稳定，常出现滚动不触发、回调不执行
滚动按钮的禁用逻辑与边界判断
用户点击“向上”按钮时，如果已到顶部，按钮应视觉禁用；同理，“向下”按钮在底部时也应停用。但仅靠 scrollTop === 0 判断顶部不可靠——某些 CSS 重置或 iframe 嵌套会导致偏差。
立即学习“前端免费学习笔记（深入）”；
- 顶部判断更稳妥：
container.scrollTop （容忍 1px 浮点误差） - 底部判断用：
container.scrollTop + container.clientHeight >= container.scrollHeight - 1 - 禁用按钮建议用
disabled属性 + CSSopacity: 0.5; pointer-events: none，而非仅改样式 - 滚动过程中用户手动拖动滚动条，会打断按钮状态，需监听
scroll事件并同步更新按钮可用性
滚动本身简单，难的是让“按钮状态”“滚动精度”“跨浏览器行为”三者对齐。尤其在移动端，scrollTop 计算受缩放、iframe、第三方 SDK 干扰极大，建议所有滚动逻辑完成后，在真机上至少验证 iOS Safari 和 Android Chrome 两个环境。
