I'm trying to implement a feature where if the user scrolls his mousewheel, it scrolls down to the next section, and when they scroll again, it scrolls to the next section again. Here is an example: https://dolomiti.lefayresorts.com/en

For some reason my code doesn't work. Here is my code:

        var justscrolled = false;
        
        function scrollUp(){
            if(scrollPos > 0){
                scrollPos--;
                scrollToSection(scrollPos);
            }
        }
        
        function scrollDown(){
            if(scrollPos < maxScroll){
                scrollPos++;
                scrollToSection(scrollPos);
            }
        }
        
        function scrollToSection(index){
            justscrolled = true;
            var to = $("#section" + index).offset().top;
            console.log(index);
            console.log(to);
            $(document).scrollTop(to);
        }
        
        $(window).bind('mousewheel', function(event) {
            if (event.originalEvent.wheelDelta >= 0) {
                if(justscrolled){
                    justscrolled = false;
                    console.log("A");
                }
                else{
                    scrollUp();
                    console.log("B");
                }
            }
            else {
                console.log("downscroll");
                if(justscrolled){
                    console.log("A");
                    justscrolled = false;
                    
                }
                else{
                    console.log("B");
                    scrollDown();
                    
                }
                
            }
        }); 

When I scroll, the console logs that the scroll function worked, and I can see some flickering on my page when I scroll, but for some reason it doesn't actually scroll to the different sections.

Here is the full html file that you can test and see that it is not working: https://pastebin.com/EuGS5G2a