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 css属性

，我不得不添加50

Answer 2

而不是：

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

这样做：

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

向下滚动单击并不能正常工作

2 个答案: