单击锚链接时如何实现平滑滚动到不同页面上的部分？答案

【问题标题】：How to implement smooth scrolling to section on different page when an anchor link is clicked?单击锚链接时如何实现平滑滚动到不同页面上的部分？
【发布时间】：2019-04-22 08:47:29
【问题描述】：

由于我取得了一些进展，我正在编辑这篇文章。
我的主菜单水平位于页面顶部，带有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 显示在视口顶部下方 200 像素处，并且不会被我的粘性标题覆盖。
<li><a href="different-page.html#link3">Link 3</a></li> 从 index.html 链接到 @ 上的 <h1 id="link3">Heading 3</h1> 部分987654330@ 这也有效，除了 -200 的偏移量被忽略。这意味着部分顶部与视口顶部对齐，因此它会被粘性导航覆盖。
我猜想进入一个新页面会以某种方式与我的 js 混淆？我希望它始终注意偏移量，以便当我链接到另一个页面上的特定部分时，此部分加载距离视口顶部 200 像素（因此在我的标题下方，而不是在下方）。
希望我解释得对。

【问题讨论】：

标签： javascript smooth-scrolling

【解决方案1】：

我更改了代码一些 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>

【讨论】：

谢谢，这很有效，尽管它在main 部分添加了一个滚动条。 I also figured that scroll-behavior: smooth; 没有很好的跨浏览器支持。所以我认为js解决方案是最好的。我已经更深入地寻找并更新了我的原始帖子。