我正在一个网站上固定一个菜单。在主页上，我有一些标签应锚定到网站其他页面上的ID。这些ID的锚点工作正常，但是，其内容的顶部保留在固定菜单的后面。
我试图通过使用JavaScript动画方法并添加菜单的height值来解决它。当锚点的命运ID来自同一页面时，此方法效果很好。但这对我来说不起作用，因为我想从该网站转到另一个页面中的ID。
我的HTML：
<a href="http://localhost/meu_site/psicologia#psicoterapia" class="psi-block-item"></a>
我的JavaScript：
<script src="http://localhost/meu_site/js/jquery-3.4.1.min.js"></script>
$('.psi-block-item').click(function() {
var target = $(this).attr("href")
$("html, body").animate({ scrollTop: $(target).offset().top-100 }, 100)
})
显然，当从主页跳转到另一个页面时，似乎忽略了我的上一个js命令，而只是跟随href，将部分内容保留在固定菜单后面。
[我已经看到一些人建议使用伪CSS元素并将其隐藏以使其起作用，但我一直在寻找一种干净且更专业的解决方案，仅使用html和javascript。
谢谢你们。
$(document).load(function() {
var target = this.location.href;
$("html, body").animate({ scrollTop: $(target).offset().top-100 }, 100);
})
我不确定，但这应该是解决这个问题的逻辑...
最有可能在执行代码之前重新加载页面。因此，我建议您在每个要查找哈希然后执行动画的页面上都包含一个窗口onload事件侦听器。
编辑：请查看@ nengak-dakup的答案。他的回答看起来不错。实现看起来像这样。
index.html
<html lang="en">
<head>
<meta charset="utf-8">
<title>Home</title>
</head>
<body>
<header>
<a href="page1.html#anchor1">Link to Page1 - Anchor 1</a>
<a href="page1.html#anchor2">Link to Page1 - Anchor 2</a>
<a href="page1.html#anchor3">Link to Page1 - Anchor 3</a>
</header>
</body>
和page1.html
<html lang="en">
<head>
<meta charset="utf-8">
<title>Page1</title>
<style type="text/css">
header {
position: fixed;
top: 0px;
left: 0px;
width: 100%;
height: 100px;
background-color: grey;
z-index: 5;
}
.box {
position: relative;
top: 100px;
width: 100%;
height: 800px;
}
</style>
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script type="text/javascript">
$(document).load(function() {
var target = this.location.href;
$("html, body").animate({ scrollTop: $(target).offset().top-100 }, 100);
})
</script>
</head>
<body>
<header>
<a href="index.html">Back</a>
</header>
<div id="anchor1" class="box" style="background-color: blue"></div>
<div id="anchor2" class="box" style="background-color: green"></div>
<div id="anchor3" class="box" style="background-color: red"></div>
</body>