Cross-browser Scroll Snapping In jQuery - scroll-to-section

File Size: 3.76 KB
Views Total: 3157
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Cross-browser Scroll Snapping In jQuery - scroll-to-section

scroll-to-section is a jQuery implementain of the Scroll Snapping functionality for one page scroll website and single page web app. Works perfectly on all modern web & mobile browsers.

What is Scroll Snap?

Scroll Snap is a user-friendly scroll interaction that automatically snaps the viewport to the next page section as the user scrolls through your document.

You can also achieve the scroll behavior through CSS Scroll Snap which works well on Google Chrome (69+), Firefox, Edge, and Safari.

How to use it:

1. Insert a group of page sections into your document.

<div id="container">
  <div class="block-list"></div>
  <div class="block-list"></div>
  <div class="block-list"></div>
  <div class="block-list"></div>
  <div class="block-list"></div>
  ...
</div>

2. Download and load the minified version of the scroll-to-section plugin after loading jQuery library.

<script src="https://code.jquery.com/jquery-3.4.1.min.js" 
        integrity="sha384-vk5WoKIaW/vJyUAd9n/wmopsmNhiy+L2Z+SBxGYnUkunIxVxAv/UtMOhba/xskxh" 
        crossorigin="anonymous"></script>
<script src="scroll-to-section.min.js"></script>

3. Call the function scrollToSection on the top container and specify the CSS selector of child elements.

$(function(){
  $("#container").scrollToSection({childList: ".block-list"});
});

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