目前，我正在学习如何用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。
这里的关键点是您需要使用position（）而不是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>本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句