Smooth Scrolling To Anchor Elements jQuery anchorLink - Download Smooth Scrolling To Anchor Elements With jQuery - anchorLink

Download Smooth Scrolling To Anchor Elements With jQuery – anchorLink

Posted on

This time I will share jQuery Plugin and tutorial about Smooth Scrolling To Anchor Elements With jQuery – anchorLink, hope it will help you in programming stack.

Smooth Scrolling To Anchor Elements jQuery anchorLink - Download Smooth Scrolling To Anchor Elements With jQuery - anchorLink
File Size: 3.79 KB
Views Total: 2115
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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.

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

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

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

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

1 <div id="header">Header <a href="https://www.jqueryscript.net/tags.php?/Navigation/">Navigation</a></div>
1 <a href="#header">Back To Top</a>

4. Config the scroll animation with the following settings:

01 $('a[href^="#"][href!="#"]').anchorlink({
02  
03   // animation speed in milliseconds
04   timer : 500,
05  
06   // scroll to hash in URL when loading the page
07   scrollOnLoad : true,
08  
09   // top offset in pixels
10   offsetTop : 0,
11  
12   // CSS class added to the scroll destination
13   focusClass : 'js-focus',
14  
15   // before/after scroll callbacks
16   before<a href="https://www.jqueryscript.net/tags.php?/Scroll/">Scroll</a>: function() {},
17   afterScroll : function() {}
18    
19 });

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

source : jqueryscript.net