Add Smooth Scrolling to Any Element with the jQuery ScrollTo Plugin

File Size: 20.3 KB
Views Total: 603
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Add Smooth Scrolling to Any Element with the jQuery ScrollTo Plugin

scrollto.js is a lightweight jQuery plugin for creating a configurable elegant smooth scroll effect that guides visitors to a specific element on your webpage.

Whether you're building a landing page, one page scroll website, or a blog, the jQuery ScrollTo plugin can help create the perfect scrolling experience for your visitors in no time. 

How to use it:

1. Insert the jquery-scrollto.js script after jQuery library.

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/lib/jquery-scrollto.js"></script>

2. Call the function ScrollTo on the DOM element the page should scroll to.

$(function(){
  $('#myElement').ScrollTo();
});

3. Config the duration of the scroll animation.

$('#myElement').ScrollTo({
  duration: 400,
  durationMode: 'each', // OR 'all'
});

4. Apply an easing function to the scroll animation.

$('#myElement').ScrollTo({
  easing: 'linear',
});

5. Execute a callback function when the scrolling is finished.

$('#myElement').ScrollTo({
  callback: function(){
    // do something
  }
});

6. Add offsets to the element. Default: 0.

$('#myElement').ScrollTo({
  offsetTop: 60,
  offsetLeft: 0
});

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