javascript - 使 anchor 链接位于 id 上方一些像素

Question

我目前正在开发一个网站，但在 anchor 方面遇到了问题。我的标题是固定的，当我单击 anchor 时，它会在其他页面上向我发送它应该是什么样的，但我缺少 80 像素，这是我的固定标题的高度。有一个脚本可以让 Accordion 在我点击 anchor 时在新页面上打开，但它应该滚动 80px 少...这是我在 .jsp 文件中的一些代码

 <a href="${parentLink}#${menuItem.name}" class="${menuItem.classes[anchorClasses]}">

并且有一个 .js 可以让我的 Accordion 在新页面上打开

$(document).ready(function () {
    if (location.hash != null && location.hash != "") {
        $('.collapse').removeClass('in');
        $(location.hash + '.collapse').collapse('show');
    }
});

我认为你们需要更多信息，所以请询问我任何可以帮助你们的事情。我是这方面的新手，我什至不知道应该在这里发布哪些代码来帮助你们意识到问题所在......谢谢(:

Answer 1

一种常见的方法是通过CSS向链接的原始目标元素添加一个不可见的伪元素，如下所示:

#your_anchor_id::before { 
  display: block; 
  content: " "; 
  margin-top: -80px; 
  height: 80px; 
  visibility: hidden; 
  pointer-events: none;
}

这将“扩展”具有该 ID 的元素，从而使 anchor 位于主元素上方 80 像素，而不会导致任何其他可见的更改。