fullpage js - disable navigation back to the landing page

Question

I am using fullPage JS on my website, and I have also enabled navigation the right side of the page. I have a landing page, and once scrolled down, I don't want to enable the users to be able to scroll back to the landing page. For this requirement, I am facing two issues:

1. I have disabled scrolling up on the second page so that the user can't scroll up. But I have noticed than on scrolling very fast the user can still reach the landing page. What is the fix for this?

2. I have enabled the navigation dots on the website, using which I can scroll to the very top. How can I disable navigation on the first dot?

Link to the website: https://rimildeyjsr.github.io/st.anthony

I am also attaching a link to the github repository: https://github.com/rimildeyjsr/st.anthony

Options used in the plugin :

$('#fullpage').fullpage({
                    //names for the anchors of the pages
                    anchors:['welcome','home','administration_page','faculty_section','staff_section'],
                    navigation: true,
                    navigationPosition: 'right',
                    fixedElements: '#toggle,#overlay',

                    afterLoad : function(anchorLink,index) {
                        //after loading a section, perform these functions

                        if (index == 1 || anchorLink == 'welcome'){
                            //show the other sections now that the page has loaded
                            $('#fp-nav').hide();
                            $('#section1').show();
                            $('#section2').show();
                            $('#section3').show();
                            $('#section4').show();
                            $('#toggle').hide();

                        }
                        if (index == 2 || anchorLink == 'home'){
                            $('#fp-nav').show();
                            $('#toggle').show();
                            if (window.innerWidth < 480) {
                                $('.school-logo2').fadeIn();
                            }
                            $('.school-name').addClass('come-in');
                                slideEffect();

                            $.fn.fullpage.setAllowScrolling(false,'up');
                            $.fn.fullpage.setKeyboardScrolling(false, 'up');
                        }

                        if(index == 3 || anchorLink == 'administration_page'){
                            $('#fp-nav').show();
                            $('#toggle').show();
                            $('.offscreen-logo').addClass('come-in-logo').one(animationEnd,function(){
                               display();
                            });
                            $.fn.fullpage.setAllowScrolling(true,'up');
                            $.fn.fullpage.setKeyboardScrolling(true, 'up');
                        }

                        if(index == 4 || anchorLink == 'faculty_section') {
                            $('#fp-nav').show();
                            $('#toggle').show();
                            $('#section3 .section-heading').addClass('animated fadeInDown');
                            $('#section3 .card').addClass('animated fadeInUp');
                            $.fn.fullpage.setAllowScrolling(true,'up');
                            $.fn.fullpage.setKeyboardScrolling(true, 'up');
                        }
                        if(index == 5 || anchorLink == 'staff_section') {
                            $('#fp-nav').show();
                            $('#toggle').show();
                            $('#section4 .section-heading').addClass('animated fadeInDown');
                            $('#section4 .card').addClass('animated fadeInUp');
                            $.fn.fullpage.setAllowScrolling(true,'up');
                            $.fn.fullpage.setKeyboardScrolling(true, 'up');
                        }
                    }

                });

Answer 1

I'm unable to replicate issue #1, in which you say you can scroll quickly and still reach the first slide. I've tried scrolling as fast as I can in both Chrome & Safari on desktop and wasn't able to reach the first slide after the initial scroll down.

If you're looking to hide the first pagination dot, you could target the li using :first-of-type. In your case, you could add the following code:

#fp-nav ul li:first-of-type { display: none; }

If you're looking to keep it, but just disable the functionality, you can use pointer-events, in which case you'd use:

#fp-nav ul li:first-of-type { pointer-events: none; }