smoothscroll to target on some 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

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

$(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>

Answer 2

您需要在scrollTop上添加.left，因为滚动条显示在那里而不是.box，即overflow-y是可见的，并且可以滚动.left而不是.box

$(document).ready(function(){
  $('button').click(function(){
  var bt = $("#find").offset().top;
    $('.left').animate({
      scrollTop: bt 
    }, 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>