如何平滑滚动到div而不是锚点？

Question

如何平滑滚动到没有锚点的div？

我的HTML：

$("#click1").click(function() {
    $('html, body').animate({
        scrollTop: $("#section1").offset().top
    }, 2000);
    });


$("#click2").click(function() {
    $('html, body').animate({
        scrollTop: $("#section2").offset().top
    }, 2000);
    });
    
$("#click3").click(function() {
    $('html, body').animate({
        scrollTop: $("#section3").offset().top
    }, 2000);
    });

.menu {
 position: fixed;
    top: 0px;
    left: 0px;
    background: #00a3e0;
}

.menu a {
  color:#ffffff;
  font-size: 13px;
    line-height: 40px;
    margin-right: 30px;
    display: inline-block;
    cursor: pointer;
}

#section1 {
  height:300px;
  background:yellow;
  clear:both;
  margin-top:40px;
}

#section2 {
  height:500px;
  background:green;
  clear:both;
  margin-top:40px;
}

#section3 {
  height:300px;
  background:red;
  clear:both;
  margin-top:40px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="menu">
<a id="click1">click1</a>
<a id="click2">click2</a>
<a id="click3">click3</a>
</div>


<div id="section1">I'm Sectoin1</div>
<div id="section2">I'm Sectoin2</div>
<div id="section3">I'm Sectoin3</div>

我想点击“click3”滚动到<div id="section3"></div>，然后点击“click1”滚动到<div id="section1"></div>。

我怎样才能做到这一点？