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: January 19, 2024
File Type: zip archive (HTML, CSS & JavaScript )
Package Size: 12 KB
Dependencies: jQuery 3.0 or Latest version and jQuery Easing
Last Modified:

Code Rating

[site_reviews_summary assigned_to=”post_id”]

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:

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

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


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



  • Updated README file.


  • 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.


	arrowKeys : false,
duration 600 Number The duration of scrolling animation in milliseconds.


	duration : 600,
easing “swing” String The transition effect of scroll animation. Possible options are “swing” or “linear”.


	easing : "swing",
ordered true Boolean Scroll the item according to markup structure order.


	ordered : true,
scrollBar true Boolean Show or hide scrollbar. Set false to hide scrollbar.


	scrollBar : true,
[site_reviews assigned_to=”post_id”]

Submit Your Review

[site_reviews_form assign_to=”post_id”]

About CodeHim

Free Web Design Code & Scripts - CodeHim is one of the BEST developer websites that provide web designers and developers with a simple way to preview and download a variety of free code & scripts. All codes published on CodeHim are open source, distributed under OSD-compliant license which grants all the rights to use, study, change and share the software in modified and unmodified form. Before publishing, we test and review each code snippet to avoid errors, but we cannot warrant the full correctness of all content. All trademarks, trade names, logos, and icons are the property of their respective owners... find out more...

Please Rel0ad/PressF5 this page if you can't click the download/preview link