fixedHeaderScroll.js是一个很小的jQuery插件，它在标题导航中的锚链接上应用了可配置的平滑滚动行为。

最棒的是，插件会自动检测固定标题的高度，并对滚动位置应用偏移量，以便在滚动页面时，您的内容始终在屏幕上可见。

它非常适合创建一个单页滚动网站，使访问者能够通过点击锚链接在页面部分之间导航。

如何使用它:

1.在网页上创建包含锚链接的固定标题导航。（如果您的网站上已有此步骤，请忽略此步骤）。

<nav>
  <ul>
    <li>
      <a href="#jquery">jQuery</a>
    </li>
    <li>
      <a href="#script">Script</a>
    </li>
    <li>
      <a  href="#net">.Net</a>
    </li>
  </ul>
</nav>

<h2 id="jquery">jQuery</h2>
...
<h2 id="script">Script</h2>
...
<h2 id="net">.Net</h2>
...

2.在jQuery之后加载JavaScript fixedHeaderScroll.js。

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/jquery.fixedheaderscroll.js"></script>

3.初始化锚链接上的插件，并指定固定标题导航的选择器（默认值：“#header”）。

$("a[href^='#']").fixedHeaderScroll( {
  headerSelector: 'nav'
});

4.或者对滚动位置应用自定义偏移。默认值：0。

$("a[href^='#']").fixedHeaderScroll( {
  offset: 70
});

5.配置平滑滚动行为。

$("a[href^='#']").fixedHeaderScroll( {
 
  // enable/disable smooth scroll
  smooth: true,
 
  // duration of animation in milliseconds
  smoothDuration: 300
 
});

6.对平滑滚动应用缓和功能。对于更多的轻松功能，您可能需要第三个轻松库，如jQuery UI、jQuery easing等。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js"></script>

$("a[href^='#']").fixedHeaderScroll( {
 
  smoothEasing: 'easeInOutQuart'
 
});

预览截图

jQuery对固定标题进行智能平滑滚动