I have a large image of an L-shaped painting on one page. I created divs over parts of the painting I want to explain. When the page loads, I want it to scroll down the length of the image, and then move to the left of the image, stopping at each div for a few seconds. I understand how to get the page to scroll down on load, but I do not understand how to continue scrolling once it has reached the first div. Should I target the data-box and not the class, so it will continue to move through each div box?        <div class= box totem>            <span class=hoverTotem data-box=totem ></span>        </div>    <!-- ganesh -->    <div class=focus box ganesh>        <span data-box=ganesh ></span>    </div>    <!-- BIRD 1 -->    <div class=box bird1>        <span data-box=bird1 ></span>    </div>    <!-- KATY -->    <div class=box katy>        <span data-box=katy ></span>    </div>    <!-- FREDIA -->    <div class=box fredia>        <span data-box=fredia ></span>    </div>       <!-- saar -->    <div class=box saar>        <span data-box=saar ></span>    </div>    <!-- parks -->    <div class=box parks>        <span data-box=parks ></span>    </div>    <!-- james -->    <div class=box james>        <span data-box=james ></span>    </div>     <!-- ANNA -->    <div class=box anna>        <span data-box=anna ></span>    </div>      <!-- ANDY -->    <div class=box andy>        <span data-box=andy ></span>    </div>     <!-- AI -->    <div class=box ai>        <span data-box=ai ></span>    </div>    <!-- FRIENDS -->    <div class=box friends1>        <span data-box=friends1 ></span>    </div>    <div class=friends2>        <span data-box=friends2 ></span>    </div>    <div class=box friends3>        <span data-box=friends3 ></span>    </div>      <!-- KIDS -->    <div class=box kids>        <span data-box=kids ></span>    </div>              <!-- PARENTS -->        <div class=box parents>        <span data-box=parents ></span>    </div>              <!-- QUOTE -->        <div class=box quote>        <span data-box=quote ></span>    </div>          <!-- BIRD 2 -->    <div class=box bird2>        <span data-box=box bird2 ></span>    </div>        </div><div class=container-fluid>    <div id= class=row meaningImg>        <div class=background>                                    <a href=../public/img/TALLPART1.png>              <img class= src=../public/img/TALLPART1.png class=meaningImg>            </a>        </div>    </div></div>      <script>    $(document).ready(function(){    $('html, body').animate({        scrollTop: $(.bird1).offset().top}, 5000),        scrollLeft: $('.quote').offset().top}, 5000);});</script>
Scroll with multiple, and going different directions
jquery;html
Ok, I got my code to work. I kept my HTML the same but made a few changes to my jQuery.    $(document).ready(function(){$('html, body').animate({    scrollTop: $(.ganesh).offset().top,}, 5000).animate({    scrollLeft: $(.bird1).offset().left,}, 5000).animate({    scrollLeft: $(.saar).offset().left,}, 5000).animate({     scrollLeft: $(.anna).offset().left,}, 5000).animate({     scrollLeft: $(.friends1).offset().left,}, 5000).animate({     scrollLeft: $(.quote).offset().left,}, 5000);});  