Question

目前，我正在学习如何用javascript和jquery编写。我写了一个简单的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>

致以最诚挚的问候，

George S.

Answer 1

这里的关键点是你需要使用position（）而不是offset（）方法。 offset()方法返回相对于文档的坐标。

描述：获取相对于文档的匹配元素集中第一个元素的当前坐标。

但是，您尝试在容器内滚动它们。请参阅实施：

注1：我对代码进行了优化，因此使用data-target属性代替多个类似的块来定义哪个块滚动到。

注2： position（）方法从容器的左上角返回坐标。因此，一旦内容滚动，就改变坐标。这就是为什么我们需要通过添加 $（'。Container'）来补偿它.rollTop（）。

$(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无法正常工作

1 个答案: