jQuery Scroll to Next Section on Scroll – snapScroll.js

How to Create Jquery Scroll To Next Section On Scroll

1. After downloading this project, load the jQuery and jQuery Easing into your page.

<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

<!-- jQuery Easing -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js"></script>

2. Now its time to load plugin assets. So, include plugin assets (from downloaded directory) in your website.

<!-- Stylesheet -->
<link rel="stylesheet" href="css/example.css">
<!-- snapScroll.js JS -->
<script src="js/jquery.snapScroll.min.js"></script>

3. Create HTML structure like below:

   <main>
      <div class="height-100" data-snap-point>
        An example of snapScroll.js, using a bounce animation.
      </div>
      <div class="height-30" data-snap-point>
        It works on elements of any height...
      </div>
      <div class="height-30 width-50" data-snap-point>
        ...or width.
      </div>
      <div class="height-40" data-snap-point>
        Snapping to your chosen elements.
      </div>
      <div class="height-80" data-snap-point>
        Easy peasy!
      </div>
    </main>

4. When all was done, call the snapScroll.js plugin (with main selector) in jQuery document ready function to active the snapScroll.js.

$(document).ready(function(){
	$('main').snapScroll();
});

For more advance usage, please check the Configuration Options tab.