14

理念

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

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

手动的：

<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>

问题

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

但它经常停在错误的地方，因为它去了锚点，然后它不断加载图像，这改变了内容的位置

是否有可能等待所有内容加载完毕，然后进入锚点，或者有什么更好的解决方案来解决这个问题？

4

2 回答 2

5

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

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

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;">

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

于 2013-03-09T22:20:55.050 回答
5

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

$(document).ready(function() {
    if(window.location.hash) {
        $('html, body').animate({
            scrollTop: $(window.location.hash).offset().top - 20
        }, 500);
    }
});
于 2017-12-01T15:08:39.817 回答