通过 javascript 动态计算目标区块相对于视口顶部的距离，并调用 `scrollto()` 滚动到该位置，确保内容在固定头部下方完整可见，适配不同屏幕尺寸和布局。
在网页中，当页面顶部存在 position: fixed 的导航栏（如 .header）时，直接滚动到某个区块的绝对偏移量（如 window.scrollTo(0, 100)）往往会导致内容被头部遮挡——尤其当用户屏幕高度、缩放比例或头部高度变化时，硬编码像素值（如 100px）完全不可靠。
更健壮的解决方案是：利用 getBoundingClientRect() 获取目标元素相对于当前视口（viewport）顶部的真实距离，并以此作为滚动目标值。由于 getBoundingClientRect().top 返回的是元素上边缘距离视口顶部的像素值（含滚动偏移），它天然兼容固定定位头部，无需手动减去头部高度。
以下为推荐实现代码：
document.querySelector('.booking__button').addEventListener('click', (evt) => {
// 向上查找最近的 <section class="booking"> 元素（即目标区块容器）
const targetSection = evt.currentTarget.closest('section.booking');
// 获取该区块相对于当前视口顶部的位置（自动考虑 fixed 头部影响）
const { top } = targetSection.getBoundingClientRect();
// 平滑滚动至该位置（Y 轴坐标）
window.scrollTo({
top: top,
behavior: 'smooth' // 可选：添加滚动动画提升体验
});
});✅ 关键优势说明：
- closest('section.booking') 精准定位语义化容器，避免依赖 DOM 结构深度；
- getBoundingClientRect().top 是实时、响应式、与 CSS 定位无关的物理像素值，不受 position: fixed、transform 或缩放干扰；
- behavior: 'smooth' 提供原生平滑滚动（现代浏览器均支持），显著提升用户体验；
- 无需预先计算或监听窗口尺寸变化，零维护成本。
⚠️ 注意事项：
- 确保目标元素（如 .booking）在文档流中具有明确位置（非 display: none 或 visibility: hidden）；
- 若需兼容旧版 Safari（<15.4），可降级使用 window.scrollTo(0, top) 并配合第三方平滑滚动库；
- 如页面存在多个 .booking__button，建议使用事件委托或 querySelectorAll 遍历绑定。
此方法将滚动逻辑从“猜测像素”升级为“精确测量”，真正实现跨设备、跨分辨率、跨布局的一致行为。
