Smart Smooth Scroll For Fixed Header Using jQuery

fixedHeaderScroll.js is a tiny jQuery plugin that applies a configurable smooth scroll behavior on anchor links in header navigation.

The best part is that the plugin automatically detects the height of your fixed header and applies an offset to the scroll position so that your content is always visible on the screen when scrolling through the page.

It is well-suited for creating a one page scrolling website that enables the visitor to navigate between page sections by clicking anchor links.

How to use it:

1. Create a fixed header navigation containing anchor links on the webpage. (Ignore this step if you already have one on your site).

<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. Load the JavaScript fixedHeaderScroll.js after jQuery.

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

3. Initialize the plugin on the anchor links and specify the selector of your fixed header navigation (default: '#header').

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

4. Or apply a custom offset to scroll position. Default: 0.

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

5. Config the smooth scroll behavior.

$("a[href^='#']").fixedHeaderScroll( {

  // enable/disable smooth scroll
  smooth: true,

  // duration of animation in milliseconds
  smoothDuration: 300

});

6. Apply an easing function to the smooth scroll. For more easing functions, you might need a 3rd easing library such as jQuery UI, jQuery Easing, etc.

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

$("a[href^='#']").fixedHeaderScroll( {

  smoothEasing: 'easeInOutQuart'

});

---

This awesome jQuery plugin is developed by tnakazawa. For more Advanced Usages, please check the demo page or visit the official website.