html 锚链接跳得不够远

Question

我使用 Webflow 创建了我的网站。 我的网站只有一页，但很长。为了直接跳转到页面的其他部分，我使用了锚链接。

问题在于锚链接跳转到特定部分的距离不够远。他们下降，但在到达正确的部分之前停下来。

我假设页面未完全加载，并且无法到达特定部分（如果您在使用链接之前滚动浏览整个页面，则它可以工作）。

是否有任何选择：

• 直接加载整页或
• 点击锚链接时，不跳转而是直接在特定部分重新加载侧面

来自 weblow 的链接如下所示：

<a href="#ceramics" style="color:rgb(27,27,27)" class="menubar_links">ceramics</a>

我尝试使用链接加锚点来重新加载而不是跳转，但没有成功：

<a href="https://fabianpollex.com/#ceramics" style="color:rgb(27,27,27)" class="menubar_links">ceramics</a>

Answer 1

您的问题 – 没有图像的不同网站高度

您有大约 40 个图像延迟加载（当它们位于视口中时加载）。因此，如果您访问该网站，则只能看到视频和文本块。浏览器根据文本块确定网页的高度，这些文本块比旁边的粘性图像短得多。如果加载所有图像，它知道实际高度（以及滚动到的正确滚动位置）。通过锚点单击上的滚动动画，这会导致整页滚动，并且浏览器将在这 1 秒内加载所有图像。这导致不同的网站高度和不同的滚动到位置坐标。因为它只知道您点击导航时的位置，并且不会在网站完全加载时重新计算。

可能的解决方案 – 设置纵横比

您可以使用 padding-hack 或使用自定义 CSS 并使用本机

aspect-ratio

属性。

.detail-images img {
  aspect-ratio: 4/3;
}

但是您还有视频和肖像图像，因此您需要添加类来设置 16:9 等图像比例。

此外，看起来您的页面在加载时加载了太多内容。

根据 pagespeed，您的视频首先加载并具有最高优先级，大小为 14 MB，最大应为 5 MB，并且也可以延迟加载。

我还发现，您正在使用

<form>

元素进行导航。这有点奇怪，也许您可以将其更改为以下内容，以确保本机锚点滚动无延迟地工作。

从此：

<form action="https://fabianpollex.com/#ceramics">
  <button style="background-color:transparent; color:rgb(27,27,27)" class="menubar_links" type="submit">ceramics</button>
</form>

对此：

<a href="#ceramics" class="menubar_links" title="ceramics">ceramics</a>

但这只是为了确保本机滚动行为。也许没有修复你的错误。

Answer 2

我有同样的问题 - 页面很长（课程），但我无法使用该技巧，因为图像通常具有不同的宽高比。有什么想法吗？

这对我来说是个新闻 - 我以为 Anchor 无论如何都会直接到达这一点。

有没有办法在页面加载时强制预加载超分辨率图像？还是“图”？我在这里使用 Webflow CMS Collections