CODEWITHSUNDEEP
javascriptphphtml
mike
mike

Reputation: 11

data-id Scroll down to the item when clicking

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

Upvotes: 1

Views: 220

Answers (2)

mike
mike

Reputation: 11

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

    }
}

Upvotes: 0

Omi
Omi

Reputation: 4007

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">

Upvotes: 1

Related Questions