jQuery-ScrollTop和On.Click不起作用
[英]jQuery - ScrollTop and On.Click not working
问题描述
At the moment, I am learning how to write in javascript and jquery.I wrote a simple jquery code where you have a navigation menu which on click it is scrolling to a specific div inside an overflow container. 
目前，我正在学习如何用javascript和jquery编写代码。我编写了一个简单的jquery代码，其中有一个导航菜单，单击该菜单会滚动到溢出容器内的特定div。 However, the scroll function is not working. 但是，滚动功能不起作用。 If someone can help me I am going to be really grateful. 如果有人可以帮助我，我将非常感激。 Thank you in advance. 先感谢您。
My Code: 我的代码：
$(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>
Best regards, 最好的祝福，
George S. 乔治·S。
1 个解决方案
解决方案1
2 已采纳 2016-04-23 19:06:43
The key point here is that you need to use position() but not the offset() method. 这里的关键点是您需要使用position（）而不是offset（）方法。 The offset() method returns coordinates relative to the document. offset（）方法返回相对于文档的坐标。
Description: Get the current coordinates of the first element in the set of matched elements, relative to the document.
However you are trying to scroll them inside a container. 但是，您正在尝试在容器中滚动它们。 See the implementation: 查看实现：
Note 1: I've optimized code a bit so instead of multiple similar blocks data-target attribute is used to define which block scroll to. 注意1：我对代码进行了一些优化，因此不是使用多个类似的块，而是使用data-target属性来定义滚动到哪个块。
Note 2: the position() method returns coordinates from left top corner of the container. 注意2： position（）方法从容器的左上角返回坐标。 Thus the coordinates are changed once the content has been scrolled. 因此，一旦滚动了内容，坐标就会更改。 That is why we need to compensate it by adding $('.Container').scrollTop() . 这就是为什么我们需要通过添加$（'。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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.