我正试图滚动到overflow-y:scrolldiv中的li项。前几个li正在滚动到，但那些不在视图中的不起作用，您无法滚动到它们。
我也得到了这个错误：Uncaught TypeError: Cannot read property 'top' of undefined。
要激活滚动到，您需要单击.plot__map__item，因为这将触发右侧的可滚动列表进行滚动。
jsFiddle在这里。
以下代码：
$('.plot__list__item').hover(function () {
$(this).toggleClass('active');
$('#' + $(this).data('map')).toggleClass('selected');
});
$('.plot__map__item').hover(function () {
$(this).toggleClass('active');
$('#' + $(this).data('list')).toggleClass('selected');
});
$('.plot__map__item').each(function () { // for each span
var target = $(this).data('list'); // get the text of the span
var scrollPos = $('#' + target).position().top; // use the text of the span to create an ID and get the top position of that element
$(this).click(function () { // when you click each span
$('.plot__list').animate({ // animate your right div
scrollTop: scrollPos // to the position of the target
}, 400);
});
});.plot__headings { list-style: none; padding: 0; margin: 0; font-family: proxima-nova, sans-serif; font-weight: 700; font-style: normal; font-size: 12px; line-height: 2rem; color: #333333; width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; }
.plot__headings li { width: 25%; text-align: center; padding: 30px 0; }
.plot__list { list-style: none; padding: 0; margin: 0; width: 100%; position: relative; height: 713px; overflow-y: scroll; }
.plot__list li { width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; padding: 30px 0; -webkit-transition-duration: 0.3s; -o-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: all; -o-transition-property: all; transition-property: all; }
.plot__list li:nth-child(even) { background: #F5F5F5; }
.plot__list li span { width: 25%; text-align: center; font-size:12px; line-height: 2.8rem; }
.plot__list li span:first-child { font-family: proxima-nova, sans-serif; font-weight: 600; font-style: normal; }
.plot__list li.selected { background: #AA976F; }
.plot__map__item { padding: 10px 15px;
display: inline-block; -webkit-transition-duration: 0.3s; -o-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: all; -o-transition-property: all; transition-property: all; }
.plot__map__item.selected { background: #AA976F; }<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="plot-module container o-pd-top-md">
<div class="row">
<div class="col-md-8">
<div class="svg-map">
<div id="plot-01" data-list="plot-list-01" class="plot__map__item"> Plot 01 </div>
<div id="plot-02" data-list="plot-list-02" class="plot__map__item"> Plot 02 </div>
<div id="plot-03" data-list="plot-list-03" class="plot__map__item"> Plot 03 </div>
<div id="plot-04" data-list="plot-list-04" class="plot__map__item"> Plot 04 </div>
<div id="plot-05" data-list="plot-list-05" class="plot__map__item"> Plot 05 </div>
<div id="plot-06" data-list="plot-list-06" class="plot__map__item"> Plot 06 </div>
<div id="plot-07" data-list="plot-list-07" class="plot__map__item"> Plot 07 </div>
<div id="plot-08" data-list="plot-list-08" class="plot__map__item"> Plot 08 </div>
<div id="plot-09" data-list="plot-list-09" class="plot__map__item"> Plot 09 </div>
<div id="plot-10" data-list="plot-list-10" class="plot__map__item"> Plot 10 </div>
<div id="plot-11" data-list="plot-list-11" class="plot__map__item"> Plot 11 </div>
<div id="plot-12" data-list="plot-list-12" class="plot__map__item"> Plot 12 </div>
<div id="plot-13" data-list="plot-list-13" class="plot__map__item"> Plot 13 </div>
<div id="plot-14" data-list="plot-list-14" class="plot__map__item"> Plot 14 </div>
<div id="plot-15" data-list="plot-list-15" class="plot__map__item"> Plot 15 </div>
<div id="plot-16" data-list="plot-list-16" class="plot__map__item"> Plot 16 </div>
<div id="plot-17" data-list="plot-list-17" class="plot__map__item"> Plot 17 </div>
<div id="plot-18" data-list="plot-list-18" class="plot__map__item"> Plot 18 </div>
<div id="plot-19" data-list="plot-list-19" class="plot__map__item"> Plot 19 </div>
<div id="plot-20" data-list="plot-list-20" class="plot__map__item"> Plot 20 </div>
<div id="plot-21" data-list="plot-list-21" class="plot__map__item"> Plot 21 </div>
<div id="plot-22" data-list="plot-list-22" class="plot__map__item"> Plot 22 </div>
<div id="plot-23" data-list="plot-list-23" class="plot__map__item"> Plot 23 </div>
<div id="plot-24" data-list="plot-list-24" class="plot__map__item"> Plot 24 </div>
<div id="plot-25" data-list="plot-list-25" class="plot__map__item"> Plot 25 </div>
<div id="plot-26" data-list="plot-list-26" class="plot__map__item"> Plot 26 </div>
<div id="plot-27" data-list="plot-list-27" class="plot__map__item"> Plot 27 </div>
<div id="plot-28" data-list="plot-list-28" class="plot__map__item"> Plot 28 </div>
<div id="plot-29" data-list="plot-list-29" class="plot__map__item"> Plot 29 </div>
<div id="plot-30" data-list="plot-list-30" class="plot__map__item"> Plot 30 </div>
<div id="plot-31" data-list="plot-list-31" class="plot__map__item"> Plot 31 </div>
<div id="plot-32" data-list="plot-list-32" class="plot__map__item"> Plot 32 </div>
<div id="plot-33" data-list="plot-list-33" class="plot__map__item"> Plot 33 </div>
</div>
</div>
<div class="col-md-4">
<ul class="plot__headings">
<li class="plot__headings__item">Villa Plot</li>
<li class="plot__headings__item">Plot Size</li>
<li class="plot__headings__item">Buildable Area</li>
<li class="plot__headings__item">Coverage</li>
</ul>
<ul class="plot__list">
<li id="plot-list-01" data-map="plot-01" class="plot__list__item">
<span>Plot 01</span>
<span>3,200</span>
<span>1,120</span>
<span>35</span>
</li>
<li id="plot-list-02" data-map="plot-02" class="plot__list__item">
<span>Plot 02</span>
<span>3,200</span>
<span>1,120</span>
<span>35</span>
</li>
<li id="plot-list-03" data-map="plot-03" class="plot__list__item">
<span>Plot 03</span>
<span>3,200</span>
<span>1,120</span>
<span>35</span>
</li>
<li id="plot-list-04" data-map="plot-04" class="plot__list__item">
<span>Plot 04</span>
<span>3,200</span>
<span>1,120</span>
<span>35</span>
</li>
<li id="plot-list-05" data-map="plot-05" class="plot__list__item">
<span>Plot 05</span>
<span>3,200</span>
<span>1,120</span>
<span>35</span>
</li>
<li id="plot-list-06" data-map="plot-06" class="plot__list__item">
<span>Plot 06</span>
<span>3,200</span>
<span>1,120</span>
<span>35</span>
</li>
<li id="plot-list-07" data-map="plot-07" class="plot__list__item">
<span>Plot 07</span>
<span>3,200</span>
<span>1,120</span>
<span>35</span>
</li>
<li data-map="plot-08" data-map="plot-08" class="plot__list__item">
<span>Plot 08</span>
<span>3,200</span>
<span>1,120</span>
<span>35</span>
</li>
<li id="plot-list-09" data-map="plot-09" class="plot__list__item">
<span>Plot 09</span>
<span>3,200</span>
<span>1,120</span>
<span>35</span>
</li>
<li id="plot-list-10" data-map="plot-10" class="plot__list__item">
<span>Plot 10</span>
<span>3,200</span>
<span>1,120</span>
<span>35</span>
</li>
<li id="plot-list-11" data-map="plot-11" class="plot__list__item">
<span>Plot 11</span>
<span>3,200</span>
<span>1,120</span>
<span>35</span>
</li>
<li id="plot-list-12" data-map="plot-12" class="plot__list__item">
<span>Plot 12</span>
<span>3,200</span>
<span>1,120</span>
<span>35</span>
</li>
<li id="plot-list-13" data-map="plot-13" class="plot__list__item">
<span>Plot 13</span>
<span>3,200</span>
<span>1,120</span>
<span>35</span>
</li>
<li id="plot-list-14" data-map="plot-14" class="plot__list__item">
<span>Plot 14</span>
<span>3,200</span>
<span>1,120</span>
<span>35</span>
</li>
<li id="plot-list-15" data-map="plot-15" class="plot__list__item">
<span>Plot 15</span>
<span>3,200</span>
<span>1,120</span>
<span>35</span>
</li>
<li id="plot-list-16" data-map="plot-16" class="plot__list__item">
<span>Plot 16</span>
<span>3,200</span>
<span>1,120</span>
<span>35</span>
</li>
<li id="plot-list-17" data-map="plot-17" class="plot__list__item">
<span>Plot 17</span>
<span>3,200</span>
<span>1,120</span>
<span>35</span>
</li>
<li id="plot-list-18" data-map="plot-18" class="plot__list__item">
<span>Plot 18</span>
<span>3,200</span>
<span>1,120</span>
<span>35</span>
</li>
<li id="plot-list-19" data-map="plot-19" class="plot__list__item">
<span>Plot 19</span>
<span>3,200</span>
<span>1,120</span>
<span>35</span>
</li>
<li id="plot-list-20" data-map="plot-20" class="plot__list__item">
<span>Plot 20</span>
<span>3,200</span>
<span>1,120</span>
<span>35</span>
</li>
<li id="plot-list-21" data-map="plot-21" class="plot__list__item">
<span>Plot 21</span>
<span>3,200</span>
<span>1,120</span>
<span>35</span>
</li>
<li id="plot-list-22" data-map="plot-22" class="plot__list__item">
<span>Plot 22</span>
<span>3,200</span>
<span>1,120</span>
<span>35</span>
</li>
<li id="plot-list-23" data-map="plot-23" class="plot__list__item">
<span>Plot 23</span>
<span>3,200</span>
<span>1,120</span>
<span>35</span>
</li>
<li id="plot-list-24" data-map="plot-24" class="plot__list__item">
<span>Plot 24</span>
<span>3,200</span>
<span>1,120</span>
<span>35</span>
</li>
<li id="plot-list-25" data-map="plot-25" class="plot__list__item">
<span>Plot 25</span>
<span>3,200</span>
<span>1,120</span>
<span>35</span>
</li>
<li id="plot-list-26" data-map="plot-26" class="plot__list__item">
<span>Plot 26</span>
<span>3,200</span>
<span>1,120</span>
<span>35</span>
</li>
<li id="plot-list-27" data-map="plot-27" class="plot__list__item">
<span>Plot 27</span>
<span>3,200</span>
<span>1,120</span>
<span>35</span>
</li>
<li id="plot-list-28" data-map="plot-28" class="plot__list__item">
<span>Plot 28</span>
<span>3,200</span>
<span>1,120</span>
<span>35</span>
</li>
<li id="plot-list-29" data-map="plot-29" class="plot__list__item">
<span>Plot 29</span>
<span>3,200</span>
<span>1,120</span>
<span>35</span>
</li>
<li id="plot-list-30" data-map="plot-30" class="plot__list__item">
<span>Plot 30</span>
<span>3,200</span>
<span>1,120</span>
<span>35</span>
</li>
<li id="plot-list-31" data-map="plot-32" class="plot__list__item">
<span>Plot 31</span>
<span>3,200</span>
<span>1,120</span>
<span>35</span>
</li>
<li id="plot-list-32" data-map="plot-32" class="plot__list__item">
<span>Plot 32</span>
<span>3,200</span>
<span>1,120</span>
<span>35</span>
</li>
<li id="plot-list-33" data-map="plot-33" class="plot__list__item">
<span>Plot 33</span>
<span>3,200</span>
<span>1,120</span>
<span>35</span>
</li>
</ul>
</div>
</div>
</section>$('.plot__list__item').hover(function () {
$(this).toggleClass('active');
$('#' + $(this).data('map')).toggleClass('selected');
});
$('.plot__map__item').hover(function () {
$(this).toggleClass('active');
$('#' + $(this).data('list')).toggleClass('selected');
});
$('.plot__map__item').click(function() {
let id = $(this).data('list');
let scrollPos = $('#' + id).position().top;
$('.plot__list').animate({
scrollTop: scrollPos
}, 400);
});