在为固定 header 制作 space 时，需要让锚标记转到特定的 id

Question

我的应用程序的 "/" 路线有一个图像轮播，每个图像都有一个动态生成的锚标记，指向图像在另一条路线（4 条可能路线中的 1 条）上的位置。标签拉起带有图像的页面，但固定的 header 妨碍了我，我希望图像或多或少位于页面的中间而不是最顶部。我看过这个问题的解决方案：

Adding an automatic offset to the scroll position for all hash-links/calls

Make anchor link go some pixels above where it's linked to

这些解决方案都涉及向元素添加填充或边距以将内容向下推过 header，但这对我来说不是一个选项，因为内容的排列方式（非常接近每个其他）。其他解决方案涉及使用 javascript 添加事件侦听器或使页面从 href 目标向上滚动，但我认为我不能使用 client-side javascript 来引用另一条路线我的服务器。

是否可以操纵这些解决方案中的任何一个以适用于我的特定用例？我将 node.js 与快速服务器一起使用，我的页面使用 ejs 进行模板化，并且我确实安装了 bootstrap。这是在根路由上生成锚标记的代码：

<%  artWorks.forEach(function(artWork) { %>
      <% var randomArt = Math.floor(Math.random()*artWorks.length) %>
        <div class="carousel-item container-fluid">
          <a href=<%= artWorks[randomArt].imgCategory %>#<%=artWorks[randomArt].alt%> ><img loading="lazy" class="img-fluid" src="<%= artWorks[randomArt].thumbnail %>" class="d-block w-100"/></a>
        </div>
      <% }); %>
      </div>

Answer 1

我能想到的解决这个问题的最好方法是添加一个块级元素（如 div），其高度与body 元素。这会将其余可见内容推到 header 下方，从而使锚标记中引用的元素不会被 header 阻止。我认为这是一个 hacky 解决方案，但它有效。

在为固定 header 制作 space 时，需要让锚标记转到特定的 id

Need to make anchor tag to go to specific id while making space for the fixed header

html

javascript

css

anchor

node.js