I'm currently working on a website with sections that are set to be 100% height of the window, but at least 800px tall.
My goal is to implement a smooth scrolling functionality where one scroll moves the view from section to section. However, if the scroll distance is less than 800px, it should act as normal scrolling until reaching the end or start of a new section.
I attempted to write a script myself, but it's not performing as well as I'd like.
Is there a reliable script or tutorial available for this purpose?
(Here is my current attempt, which hasn't been successful...)
var prevScroll = $(window).scrollTop();
var currentSection = getCurrentSection();
$(window).scroll(function(){
var newScroll = $(this).scrollTop();
if (newScroll > prevScroll){
checkScrolling("down");
} else {
checkScrolling("up");
}
prevScroll = newScroll;
});
function checkScrolling(direction) {
var fromTop = $(window).scrollTop();
var windowHeight = Math.max($(window).height(), 800);
var currentPlace = $(currentSection).offset().top;
if ( direction == "down" ) {
if ( currentSection != ".blogs" ) {
var nextPlace = $(currentSection).next().offset().top;
if ( fromTop+windowHeight >= nextPlace ) {
$("html, body").animate({scrollTop: nextPlace}, 1000);
setTimeout(function(){
currentSection = getCurrentSection();
}, 1001);
}
}
} else {
if ( currentSection != ".about" ) {
var prevPlace = $(currentSection).prev().offset().top;
if ( fromTop <= prevPlace+windowHeight ) {
$("html, body").animate({scrollTop: prevPlace}, 1000);
setTimeout(function(){
currentSection = getCurrentSection();
}, 1001);
}
}
}
}
function getCurrentSection() {
var fromTop = $(window).scrollTop();
var windowHeight = Math.max($(window).height(), 800);
var s1 = $(".about").offset().top;
var s2 = $(".works").offset().top;
var s3 = $(".blogs").offset().top;
if ( s1 <= fromTop && fromTop < s1+windowHeight ) {
return ".about";
} else if ( s2 <= fromTop && fromTop < s2+windowHeight ) {
return ".works";
} else if ( s3 <= fromTop && fromTop <= s3+windowHeight ) {
return ".blogs";
}
}