锚点链接跳转后未精准到达目标位置，主因是懒加载图片/视频导致页面高度动态变化，浏览器在点击时按旧高度计算滚动坐标；通过预设宽高比、优化资源加载及修复语义化标签可彻底解决。
在 Webflow（或其他现代建站工具）中使用单页长内容时， 锚点跳转失效或“跳不够远”是一个高频问题。表面看是 JS 或 CSS 干扰，实则根源在于页面布局的动态性：大量图片、视频采用懒加载（lazy loading），初始渲染时 DOM 高度远小于最终高度。当用户点击锚点时，浏览器依据当前已知高度计算目标滚动位置（例如 scrollTo(0, 850)），但随后图片陆续加载、容器撑开，真实目标元素已下移——而滚动动画早已完成，造成“停在半路”的错觉。
✅ 根本解决方案：固定容器占位，阻断高度抖动
最可靠的方式是让每个懒加载媒体元素提前预留正确空间，避免加载前后布局重排。推荐两种兼容性与语义兼备的方法：
1. 使用原生 aspect-ratio（推荐，现代浏览器支持良好）
为图片、视频容器统一设置宽高比，确保其占位稳定：
/* Webflow 中可添加至 Custom Code > Footer Code 或 Class 设置 */
.detail-images img,
.project-video video,
.portrait-img img {
width: 100%;
height: auto;
aspect-ratio: 4 / 3; /* 普通横图 */
}
.landscape-video video {
aspect-ratio: 16 / 9;
}
.portrait-img img {
aspect-ratio: 3 / 4;
}
✅ 优势：纯 CSS、无 JS 依赖、响应式友好；Webflow 项目中可在「Custom Attributes」为不同容器添加对应 class 后一键复用。
2. 兜底方案：Padding-Hack（兼容 IE/旧版 Safari）
若需支持极端旧环境，可用经典 padding-top 占位法（需配合 position: relative 容器）：
立即学习“前端免费学习笔记（深入）”；
.aspect-box {
position: relative;
width: 100%;
padding-top: 75%; /* 4:3 → 3/4 = 0.75 */
height: 0;
}
.aspect-box img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
⚠️ 关键配套优化（常被忽略！）
-
禁用首屏高优先级大视频：你首页 14MB 视频严重拖慢首屏渲染，且阻塞布局计算。应：
