锚点链接跳转后未精准定位目标元素，主因是懒加载图片导致页面高度动态变化；通过设置图片宽高比、优化媒体资源及修复语义化标签可彻底解决。
在 Webflow（或其他现代建站平台）中使用单页长内容时， 锚点链接本应实现平滑滚动至对应区块，但实际常出现“滚动过短”——即浏览器停在目标元素上方、未完全对齐。该问题并非 JavaScript 冲突或 CSS scroll-behavior 失效，而是由页面渲染时的“高度塌陷”引发的典型布局抖动（layout shift）。
? 根本原因：懒加载 + 无尺寸占位 = 滚动坐标错乱
你的页面包含约 40 张懒加载图片（loading=”lazy” 或 Webflow 默认行为），以及一个 14MB 的首屏高清视频。初始加载时，仅文本和视频占位符渲染，浏览器按此时内容计算文档总高度（例如：3000px）。当你点击 #ceramics 链接时，浏览器依据这 3000px 高度计算滚动目标坐标（如 2800px）。
但滚动动画启动后，图片开始逐批加载并撑开容器，页面总高度瞬间增至 5000px+ —— 此时原定的 2800px 坐标已远低于目标区块，造成“跳转不足”。
✅ 正确解决方案：预设尺寸 + 优化加载 + 语义化修复
1. 为所有响应式媒体设置宽高比（推荐 aspect-ratio）
为 .detail-images img 等图片容器添加 CSS，强制预留空间，避免加载时重排：
/* Webflow 中可在 Custom Code → Footer 添加 */
.detail-images img,
.portrait-img,
.video-placeholder {
aspect-ratio: 4 / 3; /* 普通图 */
}
.landscape-video,
.hero-video {
aspect-ratio: 16 / 9; /* 横屏视频/图 */
}
.portrait-img {
aspect-ratio: 3 / 4; /* 竖图 */
}
✅ 优势：aspect-ratio 是原生 CSS 属性（支持率 >95%），无需 JS，且兼容 Webflow 的响应式断点。若需兼容旧浏览器，可用 padding-top 百分比 Hack。
2. 优化首屏资源，禁用非必要高优先级加载
- 将 14MB 视频压缩至 ≤5MB（推荐用 HandBrake 导出 H.265 + 720p）；
- 在 Webflow 设置中关闭视频的 “Load video immediately”，启用 “Lazy load”；
- 图片统一开启 Webflow 的 “Optimize images” 并选择 “WebP” 格式。
3. 修正导航结构：禁用
✅ 改为标准语义化链接（Webflow 中直接用 Link Block 或自定义 ）：
