由于我取得了一些进展，我正在编辑这篇文章。
我的主菜单横向位于页面顶部，带有position:fixed。我想这样做，以便在点击链接时，页面顺利向下滚动到相应的目标。由于我的粘贴标题，所述目标需要显示与视口顶部的偏移量。
我的HTML / CSS：
<style>
#main_menu {
position: fixed;
}
</style>
<body>
<nav id="main_menu">
<ul>
<li><a href="#link1">Link 1</a></li>
<li><a href="#link2">Link 2</a></li>
<li><a href="different-page.html#link3">Link 3</a></li>
</ul>
</nav>
index.html的主要部分：
<main>
<h1 id="link1">Heading 1</h1>
<!-- some content -->
<h1 id="link2">Heading 2</h1>
<!-- some content -->
</main>
different-page.html的主要部分：
<main>
<!-- some content -->
<!-- some content -->
<!-- some content -->
<!-- some content -->
<h1 id="link3">Heading 3</h1>
<!-- some content -->
</main>
编辑：我现在使用它来平滑滚动部分：
$('a[href*="#"]:not([href="#"])').click(function() {
if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
if (target.length) {
$('html, body').animate({
scrollTop: target.offset().top - 220
}, 1000);
return false;
}
}
});
它适用于在一个页面上的部分之间平滑滚动。但是如果我链接到不同页面上的某个部分，它就无法正常工作。
例：
<li><a href="#link1">Link 1</a></li>到<h1 id="link1">Heading 1</h1>作品。单击时，页面向下滚动到标题1，然后标题1显示在视口顶部下方200px处，并且不会被我的粘贴标题覆盖。
<li><a href="different-page.html#link3">Link 3</a></li>从index.html链接到<h1 id="link3">Heading 3</h1>上的different-page.html节这也有效，除了忽略-200的偏移量。这意味着部分顶部与视口顶部对齐，因此它被粘性导航覆盖。
我猜想去一个新的页面不知何故与我的js混在一起？我希望它始终关注偏移量，以便当我链接到另一个页面上的特定部分时，此部分从视口顶部加载200px（因此在我的标题下方，而不是在下面）。
希望我解释得对。
我更改代码一些CSS更改 -
<style>
html {
scroll-behavior: smooth;
}
#main_menu {
position: fixed;
}
</style>
<body>
<nav id="main_menu">
<ul>
<li><a href="#link1">Link 1</a></li>
<li><a href="#link2">Link 2</a></li>
<li><a href="#link3">Link 3</a></li>
</ul>
</nav>
<main style="overflow-y:scroll;height:58vh">
<h1 id="link1">Heading 1</h1>
<!-- some content -->
<h1 id="link2">Heading 2</h1>
<!-- some content -->
<h1 id="link3">Heading 3</h1>
<!-- some content -->
</main>
<script>
// ???
</script>
</body>