Auto Snap To Next Section On Scroll - SnapScroll

SnapScroll is a jQuery plugin for one page scrolling website that has the ability to automatically scroll to next page section when you scroll up/down the webpage using mousewheel.

The plugin automatically snaps the page section to the top/bottom of the window when you element approaches the scroll position.

1. Create a set of page sections for your one page scrolling website.

<section>
  Section 1
</section>
<section>
  Section 2
</section>
<section>
  Section 3
</section>
...

2. Include the snap-scroll.js script after the latest version of jQuery library.

<script src="https://code.jquery.com/jquery-3.3.1.min.js" 
        integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT" 
        crossorigin="anonymous">
</script>
<script src="js/snap-scroll.js"></script>

3. Just call the function SnapScroll() on the sections and done.

$(function(){
  $("section").SnapScroll();
});

4. All possible plugin options.

$("section").SnapScroll({
  useClasses:true,
  classSnap:"snap-scroll",
  classVisible:"snap-scroll-visible",
  classActive:"snap-scroll-active",
  scrollDelay:300,    //ms
  wheelInterval:450,    //ms
  animateDuration:250,  //ms
  animateTimeBuffer:100,  //ms
  snapTop:true,
  snapBottom:true,
  snaps:[]
});

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