Javascript 当点击锚链接时，如何实现平滑滚动到不同页面上的节？_Javascript_Smooth Scrolling

Javascript 当点击锚链接时，如何实现平滑滚动到不同页面上的节？

javascript

Javascript 当点击锚链接时，如何实现平滑滚动到不同页面上的节？,javascript,smooth-scrolling,Javascript,Smooth Scrolling,由于我取得了一些进展，我正在编辑这篇文章。我的主菜单水平放置在页面顶部，位置为：固定。我希望这样，当点击一个链接时，页面可以平滑地向下滚动到相应的目标。由于我的粘性标题，所述目标需要以与视口顶部的偏移显示我的HTML/CSS： <style> #main_menu { position: fixed; } </style> <body> <nav id="main_menu"> <ul>

由于我取得了一些进展，我正在编辑这篇文章。
我的主菜单水平放置在页面顶部，位置为：固定。我希望这样，当点击一个链接时，页面可以平滑地向下滚动到相应的目标。由于我的粘性标题，所述目标需要以与视口顶部的偏移显示

我的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>

它可以在一页的各个部分之间平滑滚动。但是，如果我链接到其他页面上的某个部分，则该部分无法正常工作。
示例：

至

标题1

有效。单击后，页面向下滚动至标题1，标题1显示在视口顶部下方200px处，不会被我的粘性标题覆盖。

从index.html链接到

不同页面上的标题3
部分。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>


html{
滚动行为：平滑；
}
#主菜单{
位置：固定；
}





标题1
标题2
标题3
// ???

谢谢，虽然它在

main

部分添加了一个滚动条，但它仍然可以工作<代码>我还计算了滚动行为：平滑没有很好的跨浏览器支持。所以我认为js解决方案是最好的。我更仔细地寻找了一个，并更新了我原来的帖子。

<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;
    }
  }
});

  <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>