告别导航栏遮挡，实现页面流畅跳转

2023-09-06 01:02:11

在较长的页面中，使用 #id 可以快速跳转到指定 id 的段落是一个很常见的技巧。

然而，当我们使用这种方法时，可能会遇到一个问题：如果页面顶部有一个固定的导航栏，那么当我们跳转到指定段落时，导航栏可能会遮挡住该段落。
这是因为，当我们使用 #id 跳转时，浏览器会直接跳转到指定段落的顶部，而不会考虑页面其他元素的位置。
因此，如果导航栏是固定的，那么它就会一直停留在页面的顶部，遮挡住我们想要跳转到的段落。

为了解决这个问题，我们可以使用两种方法：

1. css定位
使用css定位可以将导航栏固定在页面的顶部，同时又不会遮挡住我们想要跳转到的段落。
具体做法是，我们可以将导航栏的position属性设置为fixed，并将top属性设置为0。
这样，导航栏就会一直固定在页面的顶部，但不会遮挡住我们想要跳转到的段落。

<div id="navbar">
  <ul>
    <li><a href="#section1">Section 1</a></li>
    <li><a href="#section2">Section 2</a></li>
    <li><a href="#section3">Section 3</a></li>
  </ul>
</div>

<div id="content">
  <section id="section1">
    <h1>Section 1</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eget lacus eget nunc luctus vulputate. Donec eget laoreet nibh. Mauris eget lacus eget nunc luctus vulputate. Donec eget laoreet nibh.</p>
  </section>
  <section id="section2">
    <h1>Section 2</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eget lacus eget nunc luctus vulputate. Donec eget laoreet nibh. Mauris eget lacus eget nunc luctus vulputate. Donec eget laoreet nibh.</p>
  </section>
  <section id="section3">
    <h1>Section 3</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eget lacus eget nunc luctus vulputate. Donec eget laoreet nibh. Mauris eget lacus eget nunc luctus vulputate. Donec eget laoreet nibh.</p>
  </section>
</div>

#navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: #f1f1f1;
}

#content {
  margin-top: 60px;
}

2. 平滑滚动
使用平滑滚动可以使页面在跳转到指定段落时滚动更加平滑，避免出现突然跳转的情况。
具体做法是，我们可以使用javascript来实现平滑滚动。
首先，我们需要获取要跳转到的段落的id。
然后，我们可以使用javascript的scrollIntoView()方法来平滑地滚动到该段落。

<div id="navbar">
  <ul>
    <li><a href="#section1">Section 1</a></li>
    <li><a href="#section2">Section 2</a></li>
    <li><a href="#section3">Section 3</a></li>
  </ul>
</div>

<div id="content">
  <section id="section1">
    <h1>Section 1</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eget lacus eget nunc luctus vulputate. Donec eget laoreet nibh. Mauris eget lacus eget nunc luctus vulputate. Donec eget laoreet nibh.</p>
  </section>
  <section id="section2">
    <h1>Section 2</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eget lacus eget nunc luctus vulputate. Donec eget laoreet nibh. Mauris eget lacus eget nunc luctus vulputate. Donec eget laoreet nibh.</p>
  </section>
  <section id="section3">
    <h1>Section 3</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eget lacus eget nunc luctus vulputate. Donec eget laoreet nibh. Mauris eget lacus eget nunc luctus vulputate. Donec eget laoreet nibh.</p>
  </section>
</div>

document.querySelectorAll('a[href^="#"]').forEach(anchor => {
  anchor.addEventListener('click', function (e) {
    e.preventDefault();

    document.querySelector(this.getAttribute('href')).scrollIntoView({
      behavior: 'smooth'
    });
  });
});