<ul>
<li><img src="./img/1.png"></li>
<li><img src="./img/2.png"></li>
<li><img src="./img/3.png"></li>
<li><img src="./img/4.png"></li>
<li><img src="./img/5.png"></li>
</ul>
<div class="img">
<div><img src="./img/1.png"></div>
<div><img src="./img/2.png"></div>
<div><img src="./img/3.png"></div>
<div><img src="./img/4.png"></div>
<div><img src="./img/5.png"></div>
</div>
<script>
$(document).on(‘click‘, ‘li‘, function () {
let i = $(this).index();
console.log(i);
$(‘html, body‘).animate({scrollTop:$(‘.img > div‘).eq(i).offset().top},1000)
});
</script>
当点击左侧的列表时,取得点击的项的索引值。拥有对应索引值的大图进行相对偏移。