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

Question

<img>我有一个页面，该页面以标签的形式动态插入图片<div>，该页面包含其中的几个<div>。每个上面的<h1>文本<div>都有一个特定的 id，这样当我在锚标记中使用该 id 时，页面将向下滚动以显示<h1>和<div>容器。问题是从另一个页面访问页面时，例如打开此链接时。由于 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
}