目前，我正在学习如何用 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() 方法。 offset()方法返回相对于文档的坐标。
Description: Get the current coordinates of the first element in the set of matched elements, relative to the document.
但是您正试图在容器内滚动它们。查看实现:
注意 1: 我对代码进行了一些优化，因此不再使用多个相似的 block ，而是使用 data-target 属性来定义滚动到哪个 block 。
注意 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>关于javascript - jQuery - ScrollTop 和 On.Click 不工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36814912/