单击时向下滚动效果不佳

Question

我有一个带有菜单的标题，点击菜单它向下滚动到具有相似 id 的 div 这里是代码：

 $(".menu").click(function(){     
   var y = $(this).attr('id');
   var x = $('#'+y+'e').offset().top;
   $('.row').animate({scrollTop:x-60},1000);
 });

Example here 但是，当我单击关于并在滚动单击注册之后它什么也不做，当我单击注册后的联系人时，它向下滚动以注册，当我再次单击联系人时，它又返回到关于。 仅当我单击大约两次或大约单击并在此之后再单击其他菜单时，它才有效。试试看你会明白我在说什么......

html代码：

<div class="row">
<div id="homee" class="content" style="background: red;"></div>
<div id="aboute" class="content" style="background: blue;"></div>
<div id="registere" class="content" style="background: yellow;"></div>
<div id="contacte" class="content" style="background: green;"></div>


</div>

Answer 1

因为你没有提供你的code 是不是有点难以解决你的问题但是你可能只是在制作动画时错过了.stop()。看看我的例子

jsFiddle 链接：https://jsfiddle.net/3x6wq73f/2/

Javascript

$(function() {
  $('.scroll').on('click', function() {

    var $target = $('.'+$(this).data('scroll-target'));
    var $parent = $target.parent();

    $('div').stop().animate({
      scrollTop: $parent.scrollTop() + $target.position().top - 50//$('.' + target).offset().top
    }, 'slow');
  });
});

HTML

<div class="buttons">
  <a class="scroll" data-scroll-target="first">First</a>
  <a class="scroll" data-scroll-target="second">Second</a>
  <a class="scroll" data-scroll-target="third">Third</a>
  <a class="scroll" data-scroll-target="fourth">Fourth</a>
</div>

<div class="parent-div">
  Parent div
  <div class="huge-content first">
    One
  </div>
  <div class="huge-content second">
    Two
  </div>
  <div class="huge-content third">
    Three
  </div>
  <div class="huge-content fourth">
    Four
  </div>
</div>

CSS

.buttons {
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  height: 50px;
  background-color: #fff;
  border: solid 1px #f0f;
}

.parent-div {
  margin-top: 50px;
  padding: 15px;
  background-color: #000;
  color: #fff;
  max-height: 500px;
  overflow: auto;
}

.huge-content {
  height: 500px;
}

.first {
  background-color: #f00;
}

.second {
  background-color: #0f0;
}

.third {
  background-color: #00f;
}

.fourth {
  background-color: #f0f;
}

更新

现在试试我的 jsFiddle，看看我的代码。您所要做的就是让父母 scrollTop 并将其添加到目标。此外，由于我的导航固定位置高度，我不得不添加50：50 css 属性

Answer 2

代替：

$('.row').animate({scrollTop:x-60},1000);

这样做：

$('html, body').animate({scrollTop:x-60},1000);