Minimal Smooth Scroll To Plugin with jQuery - Arctic Scroll

File Size: 4.56 KB
Views Total: 1471
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Minimal Smooth Scroll To Plugin with jQuery - Arctic Scroll

Arctic Scroll is a lightweight jQuery plugin that allows an anchor link to scroll smoothly to desired point of the document using jQuery animate function.

How to use it:

1. Place jQuery JavaScript library and the jQuery Arctic Scroll plugin at the end of the document so the page loads faster.

<script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="jquery.arctic_scroll.js"></script>

2. Add anchor links and associated page sections to the document.

<a href="#element1" class="demo">Goto #1</a>
<a href="#element2" class="demo">Goto #2</a>
<a href="#element3" class="demo">Goto #3</a>

<div id="element1">
  ...
</div>

<div id="element2">
  ...
</div>

<div id="element3">
  ...
</div>

3. Scroll the web page to a specified point using dataposition attribute.

<a href="#" class="demo" data-position="100">Scroll to 100px</a>

4. You can also set a scroll offset using data-offset attribute.

<a href="#element1" class="demo" data-offset="50">Goto #1</a>
<a href="#element2" class="demo" data-offset="-50">Goto #2</a>
<a href="#element3" class="demo">Goto #3</a>

5. Just call the plugin on the anchor links and we're done.

$(".demo").arctic_scroll();

6. Possible plugin options.

$(".demo").arctic_scroll({

  // animation speed
  speed: 500,

  // scroll selector
  scroll_selector: 'html,body'
  
});

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