How to block website from moving to other <section> element and allow it only on menu link click action in jQuery

Ok, so I have a website which looks like that: <ul> <li> <a class="page-scroll" href="#network">Network</a> </li> <li> <a class="page-scroll" href="#mission">Mission</a> </li> <li> <a class="page-scroll" href="#team">Team</a> </li> </ul> <section id="network"> CONTENT </section> <section id="mission"> CONTENT </section> <section id="team"> CONTENT </section> Website uses jQuery and Bootstrap to operate and is an "one-page" site. I want the sections to block moving further and move to the next part (next section element) only when user clicks the link in the menu. I have already had different approaches to the problem using jQuery, but my solution didn't seem to be very dynamic (it worked only for the first section, and wasn't changing the variables' values to allow moving further). Could you help me with any solution?