Section wise scrolling in jquery, smoothly snaps to sections.
Mouse scroll to scroll and snap to each section.
Set the ID for your section to scroll the section.
You can change the speed of the scrolling and stay time on the section.
Example of section wise scrolling in jQuery
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
</head>
<body>
<div class="outer">
<div class="section" id="sec1">
section 1
</div>
<div class="section" id="sec2">
section 2
</div>
<div class="section" id="sec3">
section 3
</div>
<div class="section" id="sec4">
section 4
</div>
<div class="section" id="sec5">
section 5
</div>
<div>
</body>
</html>
<script type="text/javascript">
// call sectionsrcoll function
var delay = false;
var currentPage = 1;
var pageCount = jQuery(".section").length;
var swipe = document.getElementsByTagName('.section');
jQuery(document).on('mousewheel DOMMouseScroll', function (event) {
event.preventDefault();
// disable for less than 1200 width
if(jQuery(window).width() <= 1199) {
return false;
}
if (delay) return;
delay = true;
// 800 is a stop/delay time, it is changeable
setTimeout(function () {
delay = false
}, 800)
var wd = event.originalEvent.wheelDelta || -event.originalEvent.detail;
console.log(wd);
if (wd < 0) {
if (currentPage < pageCount) {
currentPage++;
}
} else {
if (1 < currentPage) {
currentPage--;
}
}
var pageLen = jQuery('#sec' + currentPage);
if(pageLen.length) {
jQuery('html,body').animate({
scrollTop: jQuery('#sec' + currentPage).offset().top
}, 300);
// 300 is a speed time, it is changeable
jQuery('#sec' + currentPage).addClass('active');
for (var i = 1; i <= pageCount; i++) {
if (i != currentPage) {
jQuery('#sec' + i).removeClass('active');
}
}
}
return false;
});
</script>
<style type="text/css">
.section { height: 600px; }
#sec1 {background-color: red ;}
#sec2 {background-color: #2b9797;}
#sec4 {background-color: green ;}
#sec3 {background-color: blue ;}
#sec5 {background-color: #171718;}
body{ overflow: hidden; }
</style>
Note :
A) 800 is a stop/delay time of the section,
B) 300 is a scrolling speed to section
C) body{ overflow: hidden; } Remove the browser scroll bar
Related : Ajax on input change
