javascript - 在溢出的 div 内滚动

Question

我是 javascript 的新手，目前我正在尝试了解更多有关它的信息。我的想法是创建一个简单的导航菜单加上一个 div，它启用了溢出并且里面有很多 div。但是，似乎我用于在溢出的 div 内滚动的代码不起作用。我试图自己解决问题，但我的知识还不够。

在底部，我将给出我编写的代码的运行示例。问题是当您单击“第 2 页”链接时，div 实际上向下滚动到第二个 div。但是，如果您已经在该页面上时按下“第 2 页”链接，您将自动转到第一个 div。此外，当我们在“第 2 页”时，“第 3 页”的链接似乎不起作用。如果有人可以帮助我或至少给我一些解决此问题的建议，我将不胜感激。提前谢谢你。

$(".Link1").click(function() {
    $('.Box').animate({
        scrollTop: $(".Page1").offset().top},
        'slow');
});

$(".Link2").click(function() {
    $('.Box').animate({
        scrollTop: $(".Page2").offset().top},
        'slow');
});

$(".Link3").click(function() {
    $('.Box').animate({
        scrollTop: $(".Page3").offset().top},
        'slow');
});

body{
  margin:0;
  padding:0;
}

.Nav{
  position:relative;
  width:10%;
  height:100vh;
  background-color:red;
  float:left;
}

.Link1{
  position:relative;
  color:#FFFFFF;
  text-align:center;
  font-size:3vw;
  cursor: pointer;
}

.Link2{
  position:relative;
  color:#FFFFFF;
  text-align:center;
  font-size:3vw;
  cursor: pointer;
}

.Link3{
  position:relative;
  color:#FFFFFF;
  text-align:center;
  font-size:3vw;
  cursor: pointer;
}

.Box{
  position:relative;
  width:90%;
  height:100vh;
  background-color:green;
  overflow-y:hidden;
  float:left;
}

.Page1{
  position:relative;
  width:100%;
  height:100vh;
  background-color:green;
}

.Page2{
  position:relative;
  width:100%;
  height:100vh;
  background-color:gold;
}

.Page3{
  position:relative;
  width:100%;
  height:100vh;
  background-color:gold;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="Nav">
  <div class="Link1">
    Page 1
  </div>
  <div class="Link2">
    Page 2
  </div>
  <div class="Link3">
    Page 3
  </div>
</div>

<div class="Box">
  <div class="Page1">
    Page 1
  </div>
  <div class="Page2">
    Page 2
  </div>
  <div class="Page3">
    Page 3
  </div>
</div>

Answer 1

让我向您推荐 anchor 滚动的最佳选择:

$(document).on('click', '.scroller-link', function () {
    var obj = $($(this).attr('href'));

    if (obj.size() > 0) {
        $(selector).animate({
            scrollTop: obj.offset().top
        });
        return false;
    }
});

(不要忘记设置selector)

HTML:

<a class="scroller-link" href="#divID"></a>
<div id="divID"></div>