Search code examples
javascriptjqueryhtmlsmooth-scrolling

JS scrollTo next Section onscroll


i'd like to limit scrolling on my webpage to divs/sections whatever. Like limiting the scroll step to the screen-height. If a user scrolls whether it is with a mouse-wheel or a mac 2-finger-scroll. He should scroll automatically to the next section or the previous one. Example pages: Jenny Example FLPNY Example

I have already found a function here, to limit listening to the scroll event (debounce). I just can't figure out how no to get a random scroll behaviour.

function debounce(func, interval) {
    var lastCall = -1;
    return function () {
        clearTimeout(lastCall);
        var args = arguments;
        lastCall = setTimeout(function () {
            func.apply(this, args);
        }, interval);
    };
}

$(window).on('wheel', debounce(function (e) {
    currentScrollPosition = document.documentElement.scrollTop || document.body.scrollTop;
    var delta = e.originalEvent.deltaY;

    if (delta > 0) {
        console.log("down");

        $("html, body").animate({
            scrollTop: nextSection
        }, 500);
    }
    else {
        console.log("up");

        // this will search within the section
        $("html, body").animate({
            scrollTop: prevSection
        }, 500);

    }

Solution

  • Not quite sure what you mean by:

    I just can't figure out how no to get a random scroll behaviour.

    But the site you link is making use of fullPage.js.