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

您可以使用带有scrollTop属性的animate方法轻松做到这一点。 您可以增加/减少动画持续时间，当前设置为 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">

Answer 2

谢谢我用这个代码修复

<a href='#6' class='jumpto'>Unit 1</a> <span>===</span> <a href='#10' class='jumpto'>Unit 2</a>

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

$(".jumpto").on("click",function(e){
    var id_ = $(this).attr("href");
    id_ = id_.replace("#","");
    changePageNumber(id_);
});
function changePageNumber(id){
    var dataid = id;
    if (dataid > 0 && dataid <=limit ) {
        var scrollTop     = $("img[data-id='1']").offset().top,
        elementOffset = $("img[data-id='"+dataid+"']").offset().top,
        distance      = (elementOffset - scrollTop);
            $("#viewerContainer").animate({scrollTop : distance}, "slow");
            $("#pageNumber").val(dataid);
            slideSelect(dataid);

    }
}