通过 javascript 动态获取目标区块相对于视口的垂直位置，并调用 window.scrollto() 滚动到该位置，确保内容在固定头部下方完整可见，无需硬编码像素值。
在网页中，当页面顶部存在 position: fixed 的导航栏（如 .header）时，直接滚动到某个区块的绝对文档偏移（如 offsetTop）会导致该区块被头部遮挡。一个健壮、响应式的解决方案是：利用 getBoundingClientRect() 获取目标元素相对于当前视口顶部的距离（即 top 值），再以此为滚动目标。
该方法完全规避了对固定头部高度的硬编码依赖（例如原代码中的 100px），也无需预先计算或监听窗口尺寸变化——因为 getBoundingClientRect() 返回的是实时、布局感知的坐标，天然适配不同屏幕、缩放比例及动态样式。
以下是推荐实现：
document.querySelector('.booking__button').addEventListener('click', (evt) => {
// 向上查找最近的 <section class="booking"> 元素（即目标区块容器）
const targetSection = evt.currentTarget.closest('section.booking');
// 获取该区块相对于当前视口顶部的距离（含滚动偏移）
const { top } = targetSection.getBoundingClientRect();
// 滚动至视口顶部对齐该区块上边缘（自然避开 fixed header）
window.scrollTo({
top: top + window.scrollY,
behavior: 'smooth' // 可选：添加平滑滚动效果
});
});✅ 关键说明： evt.currentTarget.closest('section.booking') 精准定位功能区块，避免因 DOM 结构微调导致失效； getBoundingClientRect().top 返回的是相对于当前视口顶部的像素值（若元素已在视口内则为负值/0，若在视口外则为正值），因此需加上当前滚动高度 window.scrollY 才能得到文档内的绝对 Y 坐标； 使用 scrollTo({ top, behavior: 'smooth' }) 提升用户体验，现代浏览器均支持； 该逻辑与 CSS 中 .header { position: fixed; height: 60px } 完全解耦，即使头部高度日后改为 80px 或通过 rem 动态设置，代码仍零修改可用。
注意事项：
- 确保目标元素（如 .booking）在 DOM 中真实存在且可被 closest() 匹配；
- 若需兼容 IE，需替换 closest() 为 polyfill 或改用 parentNode 循环遍历；
- 如滚动后仍存在轻微遮挡，可微调 top 值（如 top + window.scrollY - 10），但应优先检查 CSS 是否意外引入 margin/padding 影响布局。
此方案简洁、可靠、语义清晰，是处理“滚动至带固定头部页面中某区块”问题的标准实践。
