Add Smooth Scrolling To Webpage - jQuery ksmoothscroll.js

ksmoothscroll.js is an ultra-light (~1kb) jQuery plugin that provides a simple way to add a configurable smooth scrolling experience to your web pages.

It allows you to easily configure the duration of the scroll animation, choose from a variety of easing functions, set top offsets, and more. Also supports both anchor links and relative links.

How to use it:

1. Download and place the minified version of the ksmoothscroll plugin after jQuery.

<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="jquery.ksmoothscroll.min.js"></script>

2. Call the function and the plugin will automatically apply the smooth scroll animation to all anchor links and relative links found within the specific container.

$(function(){
  $('body').kSmoothScroll({
    // options here
  });
})

3. Config the duration of the scroll animation. Default: 1000ms.

$(function(){
  $('body').kSmoothScroll({
    duration: 500
  });
})

4. Apply an easing function to the scroll animation. You might need a third-party easing library (like jQuery UI and jQuery.easing) for advanced easing functions.

$(function(){
  $('body').kSmoothScroll({
    easing: "swing"
  });
})

5. Set the top offset when you have a fixed header navigation on the page.

$(function(){
  $('body').kSmoothScroll({
    easing: "swing",
    fixedHeaderHeight: 60,
    fixedHeaderSelector: ".header-offset:visible",
  });
})

---

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