加载后转到锚点

Question

想法

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

在我的产品页面中,我可以使用锚点将客户端直接链接到手册中的该主题,例如:

手册:

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

产品页面:

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

问题

当我单击产品页面中的"如何管理选项"链接时,它会转到手册并立即转到#manage_options锚点

但它经常停在错误的地方,因为它进入锚点,然后它继续加载图像,改变内容的位置

是否可以等待加载所有内容,然后它会转到锚点,还是针对此问题的任何更好的解决方案？

谢谢!

Answer 1

...它不断加载图像，从而改变内容的位置

最佳做法是明确声明您的图像大小以避免不必要的重绘：

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

指定图像尺寸

概述

为所有图像指定宽度和高度可以通过消除不必要的回流和重新绘制来加快渲染速度。

细节

当浏览器布局页面时，它需要能够围绕可替换的元素（如图像）流动。它甚至可以在下载图像之前开始呈现页面，前提是它知道包裹不可替换元素的尺寸。如果在包含文档中未指定尺寸，或者指定的尺寸与实际图像的尺寸不匹配，则一旦下载图像，浏览器将需要重排和重新绘制。为防止回流，请在 HTML 标签或 CSS 中指定所有图像的宽度和高度。

建议

指定与图像本身的尺寸相匹配的尺寸。不要使用宽度和高度规范来动态缩放图像。如果图像文件实际上是 60 x 60 像素，请不要在 HTML 或 CSS 中将尺寸设置为 30 x 30。如果图像需要更小，请在图像编辑器中缩放它并设置其尺寸以匹配（有关详细信息，请参阅优化图像。）确保在图像元素或块级父级上指定尺寸确保在元素本身，或块级父元素。如果父级不是块级，维度将被忽略。不要在不是直接父级的祖先上设置维度。

所以使用：

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

或者

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

...或者您可以在外部样式表中指定尺寸，但通常对于不同的图像尺寸会更加困难。这将确保您的内容不会在加载图像时发生变化。

Answer 2

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

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