Question

我在使用JQuery的动画功能在页面上平滑滚动时遇到问题。它跳转，在菜单按钮上点击两次时，在两个div之间切换，并且完全不起作用。

是否连接到滚动偶数监听器？

HTML代码：

<menu id="menu-wrapper">
    <ul id="menu-ul">
       <li class="menu-li"><a class="menu-a" href="#about">O nas<div id="menu-decoration-1" class="menu-a-decoration"></div></a></li>
       <li class="menu-li"><a class="menu-a" href="#portfolio">Portfolio<div id="menu-decoration-2" class="menu-a-decoration"></div></a></li>
       <li class="menu-li"><a class="menu-a" href="#offert">Oferta<div id="menu-decoration-3" class="menu-a-decoration"></div></a></li>
       <li class="menu-li"><a class="menu-a" href="#contact">Kontakt<div id="menu-decoration-4" class="menu-a-decoration"></div></a></li>
    </ul>
</menu>

JQuery函数：

 var aArray=["#about", "#portfolio", "#offert", "#contact"];    

  $(".menu-a").click(function(event){
    var index=$(".menu-a").index(this);
    console.log(index);
    $("#body-wrapper").animate({scrollTop:$(aArray[index]).offset().top}, 
   500);
  });

JS FIDDLE

Answer 1

每当您点击其中一个按钮时，每个索引的offset().top都会发生变化。这是一个肮脏的解决方法，但试试这个：

$(".menu-a").click(function(event){
    var index=$(".menu-a").index(this);
    console.log(index);
    $("#body-wrapper").animate({scrollTop:$(aArray[index]).offset().top - 
    $(aArray[0]).offset().top}, 500);
});

使用JQuery动画的奇怪的滚动行为

1 个答案: