Minimal In-page Smooth Scroll Plugin With jQuery - Offset Scroller

File Size: 4.21 KB
Views Total: 2373
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Minimal In-page Smooth Scroll Plugin With jQuery - Offset Scroller

Offset Scroller is an ultra-light and simple jQuery plugin which implements smooth scroll functionality with custom offsets on anchor links and content sections within the document. Good for one page websites or single page applications which have a sticky header navigation, so the visitor can scroll through your page sections with a subtle smooth scrolling effect.

How to use it:

1. Assign unique IDs to your content sections as follows:

<div class="section" id="section-1">
   <h1>Section 1</h1>
</div>
<div class="section" id="section-2">
   <h1>Section 2</h1>
</div>
<div class="section" id="section-3">
   <h1>Section 3</h1>
</div>

2. Create a sticky header navigation with anchor links pointing to the content sections.

<div id="scroll-me">
  <a href="#section-1">Section 1</a>
  <a href="#section-2">Section 2</a>
  <a href="#section-3">Section 3</a>
</div>

3. Include the jQuery Offset Scroller plugin after jQuery library has been loaded.

<script src="jquery.min.js"></script>
<script src="jquery-offset-scroller.js"></script>

4. Active the smooth scroll functionality with a custom offset.

$('#scroll-me a').offsetScroller({offsetPixels: 50});

5. Override the default animation speed.

$('#scroll-me a').offsetScroller({
  offsetPixels: 100,
  animationSpeed: 500
});

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