javascript - 平滑滚动到特定 div 上的目标

Question

当我单击按钮时，我试图找到具有 smoothscroll 效果的元素，如果目标位于 div 内，如何滚动到目标。

我正在尝试这种方法，但没有成功。如果位于 div 内部，是否可以滚动到目标

$(document).ready(function(){
  $('button').click(function(){
    $('.box').animate({
      scrollTop: $("#find").offset().top
    }, 2000);
  });
});

.box{
  clear: both;
}
.left{
  float: left;
  width: 20%;
  height: 200px;
  overflow-x: hidden;
  background-color: red;
}

#find{
  margin-top: 400px;
}

#find p{
  background-color: green
}


.right{
  float: left;
  margin-left: 10px;
  width: 50%;
  background-color: yellow;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box">
<div class="left">
  <div id="find">
    <p>find me</p>
  </div>
</div>
<div class="right">
  <button>jump</button>
</div>
</div>

Answer 1

你的逻辑是正确的，你只是滚动了错误的元素。您需要在 .left 元素上调用 animate()，因为这是溢出的元素:

$(document).ready(function() {
  $('button').click(function() {
    $('.left').animate({
      scrollTop: $("#find").offset().top
    }, 2000);
  });
});

.box {
  clear: both;
}

.left {
  float: left;
  width: 20%;
  height: 200px;
  overflow-x: hidden;
  background-color: red;
}

#find {
  margin-top: 400px;
}

#find p {
  background-color: green
}

.right {
  float: left;
  margin-left: 10px;
  width: 50%;
  background-color: yellow;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box">
  <div class="left">
    <div id="find">
      <p>find me</p>
    </div>
  </div>
  <div class="right">
    <button>jump</button>
  </div>
</div>