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.

How to use it:

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({

  // Add classes to elements
  classes:true,                   

  // Class applied to snap point elements
  classSnap:"snap-scroll",              

  // Class applied to a snap point element when within the window
  classVisible:"snap-scroll-visible",         

  // Class applied to a snap point element when snapped
  classActive:"snap-scroll-active",         

  // Use element id in hash
  hashes:false,                   

  // Delay between scroll events needed to trigger scroll action
  scrollDelay:300,                  

  // Interval used for wheel to trigger scroll action
  wheelInterval:1000,                 

  // The amount of time it takes to animate to a snap point
  animateDuration:250,       

  // The amount of time to wait after an animation is complete before scrolling can be triggered         
  animateTimeBuffer:100,                

  // Snap to the top of page regardless of there being an element
  snapTop:true,           

  // Snap to the bottom of page regardless of there being an element        
  snapBottom:true,                  

  // Extra snap points not tied to an element
  snaps:[],                     

  // Deviation in milliseconds from the average needed to separate wheel events
  maxWheelDeviation:100       

});

5. Event handlers.

$("section").SnapScroll({

  // Fires events
  events:true,                    
  
  // Fires when snap point element when snapped
  eventChangeActive:"snapscroll_change-active",   
  
  // Fires when snap point element is within the window
  eventChangeVisible:"snapscroll_change-visible",   

});

Changelog:

2018-07-17

• added events

2018-06-19

• added wheel event delta deviation to improve mouse wheel / touchpad / magic mouse scrolling

---

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