通过菜单按钮滚动时出现JavaScript问题

Question

我已经建立了一个简单的1页网站，当您单击每个菜单项时，页面会平滑滚动到该特定部分。 那部分我工作得很好...

加载该部分后，将显示图像，并且文本在图像上缓慢向上滚动，这在第一部分（最高部分）上绝对可以正常工作。

我遇到的问题是，当您单击第二，第三和第四菜单链接时，一旦页面移至页面的该部分，由于上面的部分也加载了滚动条，因此内容会继续向上滚动。

这是我用来加载文本以向上滚动的javascript：

    $(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; }

谁能推荐最好的方法，这样，当我单击第二，第三和第四部分链接时，它将跳到该部分，并且上面的内容立即加载，而无需向上滚动内容？

感谢任何反馈。 谢谢

编辑：预先为每个链接（ .about-section ， services-section等）输入上面的代码，但是意识到我只需要输入一次即可。

不过，加载该部分后，其中的内容仍会向上滚动。

任何反馈表示赞赏:)

编辑2：我整理了一个测试网站，显示了滚动问题http://test.flixonstudios.co.uk-在这里您可以看到我所说的清楚的细节。

Answer 1

我有一阵子我做了一段时间

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>