Question

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

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

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

1 个答案: