Anchor Scroll With Offset - jQuery ScrollOffset

ScrollOffset is a really small jQuery smooth scroll plugin which enables anchor links to scroll through your page content with a specific top offset.

The plugin lets you create a sticky navigation containing anchor links that smoothly scroll the page to specific positions and allows you to specify how many the pixel the page content is distant from the top of the screen.

How to use it:

1. Create a sticky navigation that contains anchor links pointing to the page sections within the document.

<nav class="myNav">
  <ul>
    <li><a href="#anchor1" class="scroll">#1</a></li>
    <li><a href="#anchor2" class="scroll">#2</a></li>
    <li><a href="#anchor3" class="scroll">#3</a></li>
  </ul>
</nav>

<section class="section" id="anchor1">
  Section 1
</section>

<section class="section" id="anchor2">
  Section 2
</section>

<section class="section" id="anchor3">
  Section 3
</section>

2. Include jQuery library and the jQuery ScrollOffset plugin on the page.

<script src="https://code.jquery.com/jquery-1.12.4.min.js" 
        integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" 
        crossorigin="anonymous">
</script>
<script src="jquery-scrolloffset.min.js"></script>

3. Call the function on the anchor links and specify the top offset in pixels.

$(function() {
  $('.scroll').scrollOffset({
    offset: 60 // default: 0
  });
});

4. Specify the duration (in milliseconds) of the smooth scrolling.

$(function() {
  $('.scroll').scrollOffset({
    offset: 60,
    duration: 500 // default: 400
  });
});

5. Execute a callback function when the smooth scroll is completely finished.

$(function() {
  $('.scroll').scrollOffset({
    offset: 60,
    duration: 400,
    onComplete: null
  });
});

---

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