装货后起锚

Question

思想

我有一个用户手册页面，它有点大，每个主题都有一个链接到它的锚。

在我的产品页面中，我可以用锚直接将客户端链接到手册中的主题，例如：

手册：

<a href="#manage_options">Managing Options</a>
<!-- Instructions on how to manage options -->

产品页：

<a href="http://example.com/manual/#!/manage_options">How to Manage Options</a>

问题

当我在Product中单击“如何管理选项”链接时，它会转到手册，并立即到达#manage_options锚点

但是它经常停在错误的地方，因为它会到达锚，然后继续加载图像，这会改变内容的位置。

是否有可能等待所有的内容被加载，然后到锚，或任何更好的解决这个问题的解决方案？

Answer 1

...it继续加载图像，这会改变内容的位置。

最好的做法是显式声明图像大小，以避免不必要的重绘：

https://developers.google.com/speed/docs/best-practices/rendering#SpecifyImageDimensions

指定图像尺寸 概述 为所有图像指定一个宽度和高度可以通过消除不必要的重新绘制和重新绘制的需要来实现更快的渲染。 详细信息 当浏览器布局页面时，它需要能够在可替换的元素(如图像)周围流动。它可以在下载图像之前就开始呈现页面，前提是它知道要将不可替换的元素包装起来的尺寸。如果在包含的文档中没有指定维度，或者指定的维度与实际图像的尺寸不匹配，则一旦下载图像，浏览器将需要再流和重新绘制。若要防止重新出现，请在HTML标记或CSS中指定所有图像的宽度和高度。 建议 指定与图像本身的尺寸匹配的维度。不要使用宽度和高度规格来缩放图片。如果图像文件实际上是60×60像素，不要在HTML或CSS中将尺寸设置为30×30。如果图像需要变小，请在图像编辑器中缩放，并将其尺寸设置为匹配(有关详细信息，请参阅优化图像)。一定要在图像元素或块级父元素上指定维度--确保设置元素本身的维度，或者块级父元素。如果父级不是块级，则将忽略维度。不要在不是直系亲属的祖先上设置维度。

因此，请使用：

<img src="cat.jpg" alt="A Cat" width="360" height="200">

或

<img src="cat.jpg" alt="A Cat" style="width:360px;height:200px;">

...or --您可以在外部样式表中指定维度，但通常情况下，由于图像大小的变化，这会更加困难。这将确保您的内容不会在加载图像时发生变化。

Answer 2

您可以使用JQuery脚本解决问题，这可以推迟页面加载后的锚链接，我还添加了一个偏移量为20 px。

$(document).ready(function() {
    if(window.location.hash) {
        $('html, body').animate({
            scrollTop: $(window.location.hash).offset().top - 20
        }, 500);
    }
});

Answer 3

function moveToHash() {
    let urlHash = window.location.hash;

    if (urlHash) {
         window.location.hash = '';
         window.location.hash = urlHash;
    }
}

(从https://stackoverflow.com/a/21447965/371908复制并修复)