html - 将 html 页面滚动到特定标记并保持焦点，即使在页面中添加了动态内容

Question

我有一个页面以 <img> 的形式动态插入图片标记为 <div> , 该页面包含其中的几个 <div> . <h1>每个 <div> 正上方的文字有一个特定的 id，这样当我在 anchor 标记中使用该 id 时，页面将向下滚动以显示 <h1>和 <div>容器。问题是从另一个页面访问页面时，例如打开 this link 时.由于 ajax 代码需要几秒钟来获取图像并因此调整几个 <div> 的高度。容器，在图像有时间插入之前，页面向下滚动到 ID 为“office”的标签。我试图滚动的容器像另一个一样迷路了 <div>容器的高度变化。

有没有一种方法可以使浏览器与 <div> 保持一致？ ，并根据页面的动态变化上下滚动？并且可能会在用户手动点击或滚动时打断焦点？

谢谢。

Answer 1

我认为您最好的选择是固定包含图像的 div 的高度，以便页面始终保持一定高度。然后当它向下滚动时，它不会在图像加载时错位。

你也可以用javascript检查url中是否有#，然后阻止跳转，直到页面完全加载。

检查散列值

if (location.hash) {
    //prevent scroll
    window.scrollTo(0, 0);

    //add function to wait till page fully loaded then scroll to anchor
}