Smooth Scrolling To Anchor Elements With jQuery - anchorLink

Yet another jQuery based smooth scroll plugin for creating a configurable scroll animation when you switch between content sections with anchor links. It also supports scrolling to the desired point using URL hash when loading the webpage.

How to use it:

1. Include both jQuery library and the jquery.anchorlink.js script at the bottom of the webpage.

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="jquery.anchorlink.js"></script>

2. Initialize the plugin and the anchorlink is ready for use.

$('a[href^="#"][href!="#"]').anchorlink();

3. Create a trigger element pointing to the desired point within the document.

<div id="header">Header Navigation</div>

<a href="#header">Back To Top</a>

4. Config the scroll animation with the following settings:

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

  // animation speed in milliseconds
  timer : 500,

  // scroll to hash in URL when loading the page
  scrollOnLoad : true,

  // top offset in pixels
  offsetTop : 0,

  // CSS class added to the scroll destination
  focusClass : 'js-focus',

  // before/after scroll callbacks
  beforeScroll: function() {},
  afterScroll : function() {}
  
});

---

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