装载后前往锚点

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>

问题

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

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

是否可以等待所有内容加载完毕，然后转到锚点，或者有更好的解决方案吗？

Answer 1

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

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

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

指定图像尺寸

概述

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

详情

浏览器布局页面时，需要能够四处流动 可替换的元素，例如图像。它可以开始渲染页面 即使在下载图像之前，只要它知道 包裹不可替换元素的尺寸。如果没有尺寸 在包含的文档中指定，或者如果尺寸 指定的图像与实际图像不匹配，浏览器将 下载图像后需要回流并重新绘制。到 防止回流，指定所有图像的宽度和高度，可以在 HTML 标签或 CSS 中。

推荐

指定与图像本身相匹配的尺寸。不 使用宽度和高度规范来动态缩放图像。如果 图像文件实际上是 60 x 60 像素，请勿将尺寸设置为 30 HTML 或 CSS 中的 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);
    }
});

Answer 3

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

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

（从https://stackoverflow.com/a/21447965/371908复制并修复）

Answer 4

当我在开发人员工具控制台中执行代码时，

@boxed 的答案效果很好，但当我在没有开发人员工具的情况下从代码运行时，它不起作用。我不知道为什么。

@zod的回答更精彩（效果流畅）。唯一需要注意的是它使用 jQuery。所以我在不使用 jQuery 的情况下对其进行了一些更改，并测试它效果很好！

核心如下：

const urlHash = window.location.hash;

if (urlHash) {
    const targetElement = document.querySelector(decodeURI(window.location.hash));

    if (targetElement) {
        var offset = 20;
        var targetOffset = targetElement.getBoundingClientRect().top + window.scrollY;
                
        window.scrollTo({
            top: targetOffset - offset,
            behavior: 'smooth' // 实现平滑滚动.   
        });
    }
}

@chimeraha 的评论也有效，但最好添加

decodeURI

以使非 ASCII 哈希起作用：

- document.getElementById(window.location.hash.substring(1)).scrollIntoView();
+ document.getElementById(decodeURI(window.location.hash.substring(1))).scrollIntoView();