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

让我建议您使用锚点滚动的最佳选择：

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

Answer 2

根据你的代码，你需要在click事件之前定义变量，但是为了实现@Undefitied的答案是最好的选择。

var var1 = $(".Page1").offset().top;
var var2 = $(".Page2").offset().top;
var var3 = $(".Page3").offset().top;

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

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


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

在溢出的div

2 个答案: