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

Question

I am trying to add an item data-id When i click on it I am trying to add a new item because I need to use Class and id An example of what I want to do

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

when click scrool to data-id="6"

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

Because my project requires more than 200 pictures sometimes

So I'm trying to add shortcuts

Are there ideas for action or solution? Thank you

Answer 1

You can do that easily with animate method with scrollTop property. You can increase/decrease animation duration currently it is set to 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

thanks i fix with this code

<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);

    }
}