jQuery-ScrollTop和On.Click不起作用

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>

最好的祝福，

乔治·S。

Answer 1

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

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

但是，您正在尝试在容器中滚动它们。 查看实现：

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

注意2： position（）方法从容器的左上角返回坐标。 因此，一旦滚动了内容，坐标就会更改。 这就是为什么我们需要通过添加$（'。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不起作用

问题描述

1 个解决方案

解决方案1
2 已采纳 2016-04-23 19:06:43

jQuery-ScrollTop和On.Click不起作用

问题描述

1 个解决方案

解决方案1 2 已采纳 2016-04-23 19:06:43

解决方案1
2 已采纳 2016-04-23 19:06:43