javascript - data-id 单击时向下滚动到该项目

Question

我正在尝试添加项目数据 ID 当我点击它时 我正在尝试添加一个新项目，因为我需要使用 Class 和 id 我想做的一个例子

<a data-goto="#6">unint q</a>

当点击滚动到data-id="6"

<img src="https://mdajd.com/06/5b2s33.webp
    " loading="lazy" data-id="6" id="viewer" class="page">

因为我的项目有时需要200多张图片

所以我正在尝试添加快捷方式

是否有行动或解决方案的想法？谢谢

Answer 1

您可以使用 animate 轻松做到这一点带有 scrollTop 属性的方法。您可以增加/减少动画持续时间，目前它设置为 500。

$("a").click(function() {
  var gotoId = $(this).data('goto');
  $('html, body').animate({
    scrollTop: $("img[data-id='" + gotoId + "']").offset().top
  }, 500);
});

img {
  height: 200px;
  width: 200px;
  display: block;
  margin-bottom: 10px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <a href="#" data-goto="1">unint a</a>
  <a href="#" data-goto="2">unint b</a>
  <a href="#" data-goto="3">unint c</a>
  <a href="#" data-goto="4">unint d</a>
  <a href="#" data-goto="5">unint q</a>
</div>

unint a
<img src="https://dummyimage.com/600x400/ff0000/ffffff" loading="lazy" data-id="1" id="viewer" class="page"> 
unint b
<img src="https://dummyimage.com/600x400/ff0000/ffffff" loading="lazy" data-id="2" id="viewer" class="page"> 
unint c
<img src="https://dummyimage.com/600x400/ff0000/ffffff" loading="lazy" data-id="3" id="viewer" class="page"> 
unint d
<img src="https://dummyimage.com/600x400/ff0000/ffffff" loading="lazy" data-id="4" id="viewer" class="page"> 
unint q
<img src="https://dummyimage.com/600x400/ff0000/ffffff" loading="lazy" data-id="5" id="viewer" class="page">