Issue with javascript when scrolling via menu buttons

Question

I have setup a simple 1 page website, and when you click each menu item the page smoothly scrolls to that specific section. That part I have working fine...

Once the section loads, an image is displayed, and text slowly scrolls up over the image, which works absolutely fine on the first section (highest section).

Issue I am having when you click the second, third and fourth menu link, once the page moves to that section of the page, the content carries on scrolling up due to the sections above loading the scroll also.

This is the javascript I am using to load the text to scroll up:

    $(document).ready(function() {

    /* Every time the window is scrolled ... */
    $(window).scroll( function(){

        /* Check the location of each desired element */
        $('.content-scroll').each( function(i){

            var bottom_of_object = $(this).position().top + $(this).outerHeight();
            var bottom_of_window = $(window).scrollTop() + $(window).height();

            /* Adjust the "200" to either have a delay or that the content starts fading a bit before you reach it  */
            bottom_of_window = bottom_of_window + 800; 

            /* If the object is completely visible in the window, fade it it */
            if( bottom_of_window > bottom_of_object ){

                $(this).animate({'margin-top':'0'},10000);

            }

        }); 

    });

});

CSS:

.content-scroll { margin-top: 1000px; }

Can anyone recommend the best way to do this, so that when I click the second, third and fourth section link it would jump to that section, and the content above loads instantly, without the content having to scroll up?

Appreciate any feedback. Thank you

EDIT: Beforehand I input the code above for each link ( .about-section , services-section etc), but realises I only needed to input it once.

Still, the content within scrolls up once the section is loaded.

Any feedback appreciated :)

EDIT 2: I have put together a test website, showing the scroll issue http://test.flixonstudios.co.uk - here you can see what I mean it clear detail.

Answer 1

I have this codepen i did a while back

https://codepen.io/simondavies/pen/WRXOZw

 $('#navigation').on('click', function(evt){ evt.preventDefault(); var gotoSection = evt.target.dataset.scrollto; var scrollPos = document.querySelector('#'+ gotoSection).offsetTop; $('html,body').animate({scrollTop: scrollPos },1000,'linear'); }); $('p').on('click','a.back',function(evt){ evt.preventDefault(); $('html,body').animate({scrollTop: 0 },1000,'linear'); }) 

 .sections { margin: 0 auto; padding:30px; height: 100Vh; background: #d9d9d9; display: table; verticle-align: middle; } .two { background: #e9e9e9; } p { margin: 0 auto; text-align: center; font-family: helvetica; font-size: 20px; line-height: 30px; font-wieght: normal; display: table-cell; vertical-align: middle; height: 100%; } nav { margin: 0 auto; padding-top: 10px; text-align: center; width: 100%; height: 40px; position: fixed; z-index: 10; top: 0; background: #555; } a { margin: 0 auto; text-align: center; font-family: helvetica; font-size: 20px; line-height: 30px; font-wieght: normal; display: inline-block; height: 30px; width: 200px; text-decoration: none; color: #fff; transition: color 500ms; } a:hover { color: red; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <nav id="navigation"> <a href="#" data-scrollto="section-one">Section One</a> | <a href="#" data-scrollto="section-two">Section Two</a> | <a href="#" data-scrollto="section-three">Section three</a> </nav> <div class="sections" id="section-one"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus neque, ducimus pariatur odio architecto excepturi, enim non recusandae, temporibus facilis eveniet nulla quo laudantium, alias quos in aliquam delectus dolore!<br /><br /><a href="#" class="back">Back to top</a></p> </div> <div class="sections two" id="section-two"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus neque, ducimus pariatur odio architecto excepturi, enim non recusandae, temporibus facilis eveniet nulla quo laudantium, alias quos in aliquam delectus dolore!<br /><br /><a href="#" class="back">Back to top</a></p> </div> <div class="sections" id="section-three"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus neque, ducimus pariatur odio architecto excepturi, enim non recusandae, temporibus facilis eveniet nulla quo laudantium, alias quos in aliquam delectus dolore!<br /><br /><a href="#" class="back">Back to top</a></p> </div>