
SnapScroll is a jQuery plugin for one page scrolling website that has the ability to automatically scroll to next page section when you scroll up/down the webpage using mousewheel.
The plugin automatically snaps the page section to the top/bottom of the window when you element approaches the scroll position.
1. Create a set of page sections for your one page scrolling website.
<section> Section 1 </section> <section> Section 2 </section> <section> Section 3 </section> ...
2. Include the snap-scroll.js
script after the latest version of jQuery library.
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT" crossorigin="anonymous"> </script> <script src="js/snap-scroll.js"></script>
3. Just call the function SnapScroll()
on the sections and done.
$(function(){ $("section").SnapScroll(); });
4. All possible plugin options.
$("section").SnapScroll({ useClasses:true, classSnap:"snap-scroll", classVisible:"snap-scroll-visible", classActive:"snap-scroll-active", scrollDelay:300, //ms wheelInterval:450, //ms animateDuration:250, //ms animateTimeBuffer:100, //ms snapTop:true, snapBottom:true, snaps:[] });
This awesome jQuery plugin is developed by koga73. For more Advanced Usages, please check the demo page or visit the official website.
- Publication date: 16.06.2018
- Source