本文介绍如何通过 javascript 动态计算目标区块相对于视口顶部的位置，精准滚动至固定 header 下方，避免硬编码像素值，确保在不同屏幕尺寸下均能正确显示搜索结果区域。
在网页中，当页面顶部存在 position: fixed 的 Header（如导航栏）时，若需将某个内容区块（例如预订搜索模块）滚动至可视区域顶部，不能简单使用固定像素值（如 scrollTo(0, 100)）——因为该偏移量会随设备屏幕高度、缩放比例或 Header 实际渲染高度变化而失效。
正确的做法是：利用 getBoundingClientRect() 获取目标元素相对于当前视口（viewport）的精确位置，并结合 scrollTo() 进行动态滚动。以下为推荐实现方案：
✅ 推荐代码（含注释）
document.querySelector('.booking__button').addEventListener('click', (evt) => {
// 找到按钮所在最近的 <section class="booking"> 容器
const bookingSection = evt.currentTarget.closest('section.booking');
// 获取该容器上边缘距离当前视口顶部的距离（已自动扣除 fixed header 占位）
const { top } = bookingSection.getBoundingClientRect();
// 滚动到该位置（即让 booking section 的顶部与视口顶部对齐）
window.scrollTo({
top: top,
behavior: 'smooth' // 可选：添加平滑滚动效果
});
});? 关键说明：getBoundingClientRect().top 返回的是元素上边界距离当前视口顶部的像素值。由于 .header 是 position: fixed，它脱离文档流，因此 booking 区块的 top 值天然已“避开” Header 占据的空间——无需手动减去 Header 高度，浏览器自动处理了布局偏移。
? HTML 结构要点（需确保语义正确）
确保按钮位于目标滚动区块内（如 <section class="booking">），以便 closest('section.booking') 能准确捕获目标容器：
<header class="header"></header>
<main class="hero"></main>
<section class="booking">
<div class="booking__module">
<button class="booking__button">预订</button>
</div>
<div class="booking__search">搜索结果将在此展示</div>
</section>
<section class="others"></section>⚠️ 注意事项
- 若页面存在其他 position: fixed 或 position: sticky 元素（如侧边栏、悬浮按钮），可能影响 getBoundingClientRect() 的计算逻辑，建议仅对主滚动容器使用此方法；
- 为提升用户体验，强烈建议添加 behavior: 'smooth' 实现平滑滚动（现代浏览器均支持）；
- 如需兼容旧版 Safari（< v15.4），可配合 scroll-behavior: smooth CSS 属性或引入 polyfill；
- 避免在 scrollTo() 中混用 window.scroll() 和 element.scrollIntoView()，二者行为逻辑不同，易引发定位偏差。
✅ 总结
动态滚动的本质是以视口为基准进行相对定位，而非依赖全局文档偏移（offsetTop）或经验数值。getBoundingClientRect() 提供了最可靠、响应式友好的坐标来源，配合 closest() 精准锚定目标容器，即可实现跨设备一致的滚动体验——既健壮，又无需维护冗余样式或 JS 配置。
