时间戳

首页 > 解决方案 > data-id 单击时向下滚动到项目

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

问题描述

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

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

当点击 scool 到 data-id="6"

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

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

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

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

标签： javascriptphphtml

解决方案

您可以使用具有属性的动画方法轻松地做到这一点。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">

推荐阅读