This time I will share jQuery Plugin and tutorial about Minimalist Full Window Scroll Snap Plugin With jQuery, hope it will help you in programming stack.
A jQuery script that provides a simple way to create a full window one page scroll website with smooth scroll snapping functionality. After scrolling, the webpage will automatically scroll and smoothly snap to the next/prev content section depending on the current scroll position.
How to use it:
1. Create a group of DIV container for the content sections.
1 |
<div id="one" class="window section-1"></div> |
2 |
<div id="two" class="window section-2"></div> |
3 |
<div id="three" class="window section-3"></div> |
2. Make the content sections full window.
3. Place the needed jQuery library in the webpage.
1 |
<script src="//code.jquery.com/jquery.min.js"></script> |
4. Declare section & current scroll position variables:
1 |
var sections = ['#one', '#two', '#three']; |
5. The core function:
01 |
function scrollListen () { |
02 |
$(window).on('scroll', function(){ |
03 |
$(window).off('scroll'); |
05 |
let origin = $(window).scrollTop(); |
08 |
$(window).on('scroll', () => { |
09 |
delta = origin - $(window).scrollTop(); |
11 |
if(Math.abs(delta) > 25){ |
12 |
$(window).off('scroll'); |
14 |
if(delta < 0 && sections[currentPos + 1]){ |
17 |
setTimeout(function() { |
18 |
$('html, body').animate({scrollTop: $(sections[currentPos]).offset().top}, 500, function() { |
23 |
}else if(delta > 0 && sections[currentPos - 1]){ |
26 |
setTimeout(function() { |
27 |
$('html, body').animate({scrollTop: $(sections[currentPos]).offset().top}, 500, function() { |
6. Calculate the window’s height and apply the scroll snap functionality to the content sections.
03 |
'height': window.innerHeight, |
06 |
$(window).resize(() => { |
08 |
'height': window.innerHeight, |
This awesome jQuery plugin is developed by THEAverageSpeedBurri. For more Advanced Usages, please check the demo page or visit the official website.
