jQuery Scroll to Next Section on Scroll – snapScroll.js

The “snapScroll.js” is a thin, easy to customize and straightforward plugin for jQuery. It makes it easy to create jQuery based scroll to next section on scroll. You just need to create your HTML sections in your page. After that, this plugin snap to next sections on window scroll event. It also support jQuery easing library to get more scrolling effects.

In addition, this plugin comes with option to hide browser scrollbar and enable / disable keyboard arrows keys.

Plugin Overview and Preview

Plugin: snapScroll.js
Author: Greg Ives
Category: Layout
Published: November 3, 2019
File Type: zip archive (HTML, CSS & JavaScript )
Package Size: 12 KB
Dependencies: jQuery 3.0 or Latest version and jQuery Easing
Last Modified:
MIT
92 views

Code Rating

0
0.0 rating
0 out of 5 stars (based on 0 reviews)
Excellent0%
Very good0%
Average0%
Poor0%
Terrible0%

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.

Changelog

11/03/209

  • Updated README file.

03/03/2018

  • Pass jQuery in reference to window, change to ES6 let and const.

Configuration Options for Scroll to Next Section on Scroll

The following are some advanced configuration options to create / customize jQuery scroll to next section on scroll.

Option Default Type Description
arrowKeys false Boolean This option enable / disable keyboard arrows key navigation.

Example:

$('main').snapScroll({
	arrowKeys : false,
}); 
duration 600 Number The duration of scrolling animation in milliseconds.

Example:

$('main').snapScroll({
	duration : 600,
}); 
easing “swing” String The transition effect of scroll animation. Possible options are “swing” or “linear”.

Example:

$('main').snapScroll({
	easing : "swing",
}); 
ordered true Boolean Scroll the item according to markup structure order.

Example:

$('main').snapScroll({
	ordered : true,
}); 
scrollBar true Boolean Show or hide scrollbar. Set false to hide scrollbar.

Example:

$('main').snapScroll({
	scrollBar : true,
}); 

There are no reviews yet. Be the first one to write one.

Submit Your Review