This time I will share jQuery Plugin and tutorial about Cross-browser Scroll Snapping In jQuery – scroll-to-section, hope it will help you in programming stack.
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.
2 |
<div class="block-list"></div> |
3 |
<div class="block-list"></div> |
4 |
<div class="block-list"></div> |
5 |
<div class="block-list"></div> |
6 |
<div class="block-list"></div> |
2. Download and load the minified version of the scroll-to-section plugin after loading jQuery library.
2 |
integrity="sha384-vk5WoKIaW/vJyUAd9n/wmopsmNhiy+L2Z+SBxGYnUkunIxVxAv/UtMOhba/xskxh" |
3 |
crossorigin="anonymous"></script> |
4 |
<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.
2 |
$("#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.
