jQuery

Question

目前，我正在学习如何在 javascript 和 jquery.I 中编写一个简单的 jquery 代码，其中有一个导航菜单，单击它会滚动到溢出容器内的特定 div。但是，滚动功能不起作用。如果有人可以帮助我，我将非常感激。提前谢谢你。

我的代码：

$(document).ready(function() {
 $("#Anchor_A").on('click', function() {
  $('.Container').animate({
   scrollTop: $("#Box_A").offset().top
  }, 'slow');
 });
  
 $("#Anchor_B").on('click', function() {
  $('.Container').animate({
   scrollTop: $("#Box_B").offset().top
  }, 'slow');
 });
  
 $("#Anchor_C").on('click', function() {
  $('.Container').animate({
   scrollTop: $("#Box_C").offset().top
  }, 'slow');
 });
  
 $("#Anchor_D").on('click', function() {
  $('.Container').animate({
   scrollTop: $("#Box_D").offset().top
  }, 'slow');
  });
    
 $("#Anchor_E").on('click', function() {
  $('.Container').animate({
   scrollTop: $("#Box_E").offset().top
  }, 'slow');
 });
});

.Wrapper{
  display:flex;
  position:relative;
  width:90vw;
  height:90vh;
  background-color:purple;
}

.Menu{
  position:relative;
  width:10vw;
  height:90vh;
  background-color:blue;
}

.Menu li{
  position:relative;
  font-size:4vw;
  line-height:5vw;
  text-align:center;
  color:white;
  cursor:pointer;
 list-style-type: none;
}

.Container{
  position:relative;
  width:80vw;
  height:90vh;
  background-color:red;
  overflow-y:hidden;
}

.Box{
  position:relative;
  width:80vw;
  height:90vh;
  background-color:purple;
 cursor:pointer;
 }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="Wrapper">
    <div class="Menu">
        <li id="Anchor_A">A</li>
        <li id="Anchor_B">B</li>
        <li id="Anchor_C">C</li>
        <li id="Anchor_D">D</li>
        <li id="Anchor_E">E</li>
    </div>
    <div class="Container">
        <div class="Box" id="Box_A">
            Box A
        </div>
        <div class="Box" id="Box_B">
            Box B
        </div>
        <div class="Box" id="Box_C">
            Box C
        </div>
        <div class="Box" id="Box_D">
            Box D
        </div>
        <div class="Box" id="Box_E">
            Box E
        </div>
    </div>
</div>

此致，

乔治·S.

Answer 1

这里的重点是你需要使用position()而不是offset()方法。 offset() 方法 returns 相对于文档的坐标。

Description: Get the current coordinates of the first element in the set of matched elements, relative to the document.

但是您正试图在容器内滚动它们。查看实现：

注意 1： 我对代码进行了一些优化，因此不再使用多个相似的块，而是使用数据目标属性来定义滚动到哪个块。

注 2： position() 方法 returns 从容器左上角算起的坐标。因此，一旦内容被滚动，坐标就会改变。这就是为什么我们需要通过添加 $('.Container').scrollTop().

来补偿它

$(document).ready(function() {
  $(".Menu li").on('click', function() {
    $('.Container').animate({
      scrollTop: $($(this).data('target')).position().top + $('.Container').scrollTop()
    }, 'slow');
  });
});

.Wrapper {
  display: flex;
  position: relative;
  width: 90vw;
  height: 90vh;
  background-color: purple;
}
.Menu {
  position: relative;
  width: 10vw;
  height: 90vh;
  background-color: blue;
}
.Menu li {
  position: relative;
  font-size: 4vw;
  line-height: 5vw;
  text-align: center;
  color: white;
  cursor: pointer;
  list-style-type: none;
}
.Container {
  position: relative;
  width: 80vw;
  height: 90vh;
  background-color: red;
  overflow-y: hidden;
}
.Box {
  position: relative;
  width: 80vw;
  height: 90vh;
  background-color: purple;
  cursor: pointer;
}

<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>

<body>
  <div class="Wrapper">
    <div class="Menu">
      <li id="Anchor_A" data-target="#Box_A">A</li>
      <li id="Anchor_B" data-target="#Box_B">B</li>
      <li id="Anchor_C" data-target="#Box_C">C</li>
      <li id="Anchor_D" data-target="#Box_D">D</li>
      <li id="Anchor_E" data-target="#Box_E">E</li>
    </div>
    <div class="Container">
      <div class="Box" id="Box_A">
        Box A
      </div>
      <div class="Box" id="Box_B">
        Box B
      </div>
      <div class="Box" id="Box_C">
        Box C
      </div>
      <div class="Box" id="Box_D">
        Box D
      </div>
      <div class="Box" id="Box_E">
        Box E
      </div>
    </div>
  </div>
</body>

</html>

jQuery - ScrollTop 和 On.Click 不工作

jQuery - ScrollTop and On.Click not working

javascript

click

onclick

scrolltop