webflow 网站中锚点链接（如 `#ceramics`）跳转后停在目标元素上方，根本原因是图片/视频懒加载导致页面高度动态变化，浏览器在点击时按初始（未加载）高度计算滚动位置，造成偏移。
在单页长内容网站中，使用锚点链接（anchor links）实现页面内导航是常见做法。但如您所遇——点击 后，页面滚动停止位置总比预期高（即目标区块未完全进入视口顶部），这并非 Webflow 或浏览器 Bug，而是页面布局重排（reflow）引发的滚动坐标失准所致。
核心原因在于：您的页面包含约 40 张懒加载图片、首屏大体积视频（14 MB），以及部分未设宽高的媒体元素。页面初始渲染时，仅文本和视频占位符被计算高度；当用户点击锚点触发滚动动画（通常约 1 秒），浏览器正滚动途中，大量图片陆续加载并撑开容器高度——此时文档总高度突然增加，但滚动目标坐标（基于旧高度计算）已固定，最终停在“原计划位置”，而非真实目标元素顶部。
✅ 正确解法不是强制刷新或禁用懒加载，而是让浏览器从一开始就知道每个媒体元素的占位空间，从而稳定页面高度：
1. 为所有图片设置明确的宽高比（推荐 aspect-ratio）
/* Webflow 自定义代码区域添加（建议放在 前） */
.detail-images img,
.project-image img,
.portrait-img img {
aspect-ratio: 4 / 3; /* 普通横图 */
}
.landscape-video video,
.hero-video video {
aspect-ratio: 16 / 9; /* 横屏视频 */
}
.portrait-img img,
.vertical-gallery img {
aspect-ratio: 3 / 4; /* 竖图 */
}
✅ aspect-ratio 是现代 CSS 标准属性（Chrome 88+、Firefox 89+、Safari 15.4+ 均支持），无需 JS 或 padding hack，语义清晰且兼容 Webflow 的响应式机制。
2. 优化媒体资源加载策略
-
压缩首屏视频：将 14 MB 视频压缩至 ≤5 MB（推荐使用 HandBrake 导出 H.265 + 720p），并启用 loading=”lazy”（Webflow 中可在视频设置里勾选 Lazy Load）；
立即学习“前端免费学习笔记（深入）”；
-
为图片启用 decoding=”async”（Webflow 默认已启用，无需额外操作）；
