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

我有这个codepen我做了一段时间

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>

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

1 个答案: