Html 装船后下锚 想法

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

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

手册：

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

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

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

是否可以等待加载所有内容，然后将其发送到锚，或者是否有更好的解决方案

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

最好明确声明图像大小以避免不必要的重新绘制：

指定图像尺寸 概述 为所有图像指定宽度和高度可以加快速度 通过消除不必要的回流和 重新油漆

细节 当浏览器布置页面时，它需要能够四处流动 可替换元素，如图像。它可以开始呈现页面 即使在下载图像之前，只要它知道 环绕不可更换元件的尺寸。如果没有尺寸 在包含文档中指定，或者如果 如果指定的图像与实际图像不匹配，浏览器将 下载图像后需要回流和重新喷漆。到 防止回流，请在中指定所有图像的宽度和高度 HTML标记，或CSS中的标记

建议 指定与图像本身尺寸匹配的尺寸。不要 使用宽度和高度规格动态缩放图像。如果 图像文件实际上是60 x 60像素，不要将尺寸设置为30 在HTML或CSS中使用x30。如果图像需要更小，请将其放大 一个图像编辑器，并将其尺寸设置为匹配（请参见优化图像） 有关详细信息），请确保在图像元素或 块级父对象请确保在元素上设置尺寸 本身，或块级父对象。如果父对象不是块级别，则 尺寸将被忽略。不要在具有以下特性的祖先上设置维度： 不是直系父母

因此，请使用：

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

或

---

…或者您可以在外部样式表中指定尺寸，但通常情况下，随着图像大小的变化，这会更加困难。这将确保您的内容不会在加载图像时发生移动。

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

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

---

完成。太棒了，一个简单的解决方案解决了80%的问题！我现在还有一个问题=>如何防止页面在加载完成后滚回顶部？（通常在访问者第一次访问时）是否可能？您是否通过AJAX加载内容？从

#的外观来看，似乎是这样的/管理选项，否则您可以解释
/零件？我不确定我是否理解它为什么会滚动回顶部，但通常在拦截单击的函数中需要
return false
或
事件。preventDefault（）
。这可能是你的问题-它正在寻找一个名为
的锚/管理_选项
，但找不到它，因此会跳到页面顶部，就像使用类似
的内容一样。我们使用完全相同的结构，Documenter 1.6=>我不明白hashbang
的意思
在那里，它实际上会在加载后将url更改为hashbang版本（您甚至可以前进几个步骤，然后单击“上一步”以获得原始url）。我可能遗漏了一些东西，但我认为这是毫无意义的虚荣（Twitter做到了，一定很好，等等）。不管怎样，您是否尝试在链接上返回false？那一页不像你说的那样跳到顶端。可能需要看更多的代码。我认为它不会跳到顶部，因为它非常轻，所以它会立即加载。尝试以下方法：（如果缓存没有立即出现bug，则清除缓存）不使用JQuery是否可行？document.getElementById（window.location.hash.substring（1））.scrollIntoView（）；
$(document).ready(function() {
    if(window.location.hash) {
        $('html, body').animate({
            scrollTop: $(window.location.hash).offset().top - 20
        }, 500);
    }
});