Scroll with multiple, and going different directions 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?




    

        &lt;div class=" box totem"&gt;
            &lt;span class="hoverTotem" data-box="totem" &gt;&lt;/span&gt;
        &lt;/div&gt;


    &lt;!-- ganesh --&gt;
    &lt;div class="focus box ganesh"&gt;
        &lt;span data-box="ganesh" &gt;&lt;/span&gt;
    &lt;/div&gt;
    &lt;!-- BIRD 1 --&gt;
    &lt;div class="box bird1"&gt;
        &lt;span data-box="bird1" &gt;&lt;/span&gt;
    &lt;/div&gt;
    &lt;!-- KATY --&gt;
    &lt;div class="box katy"&gt;
        &lt;span data-box="katy" &gt;&lt;/span&gt;
    &lt;/div&gt;
    &lt;!-- FREDIA --&gt;
    &lt;div class="box fredia"&gt;
        &lt;span data-box="fredia" &gt;&lt;/span&gt;
    &lt;/div&gt;   

    &lt;!-- saar --&gt;
    &lt;div class="box saar"&gt;
        &lt;span data-box="saar" &gt;&lt;/span&gt;
    &lt;/div&gt;

    &lt;!-- parks --&gt;
    &lt;div class="box parks"&gt;
        &lt;span data-box="parks" &gt;&lt;/span&gt;
    &lt;/div&gt;

    &lt;!-- james --&gt;
    &lt;div class="box james"&gt;
        &lt;span data-box="james" &gt;&lt;/span&gt;
    &lt;/div&gt; 

    &lt;!-- ANNA --&gt;
    &lt;div class="box anna"&gt;
        &lt;span data-box="anna" &gt;&lt;/span&gt;
    &lt;/div&gt;  

    &lt;!-- ANDY --&gt;
    &lt;div class="box andy"&gt;
        &lt;span data-box="andy" &gt;&lt;/span&gt;
    &lt;/div&gt; 

    &lt;!-- AI --&gt;
    &lt;div class="box ai"&gt;
        &lt;span data-box="ai" &gt;&lt;/span&gt;
    &lt;/div&gt;

    &lt;!-- FRIENDS --&gt;
    &lt;div class="box friends1"&gt;
        &lt;span data-box="friends1" &gt;&lt;/span&gt;
    &lt;/div&gt;
    &lt;div class="friends2"&gt;
        &lt;span data-box="friends2" &gt;&lt;/span&gt;
    &lt;/div&gt;
    &lt;div class="box friends3"&gt;
        &lt;span data-box="friends3" &gt;&lt;/span&gt;
    &lt;/div&gt;  

    &lt;!-- KIDS --&gt;
    &lt;div class="box kids"&gt;
        &lt;span data-box="kids" &gt;&lt;/span&gt;
    &lt;/div&gt;          
    &lt;!-- PARENTS --&gt;    
    &lt;div class="box parents"&gt;
        &lt;span data-box="parents" &gt;&lt;/span&gt;
    &lt;/div&gt;          
    &lt;!-- QUOTE --&gt;    
    &lt;div class="box quote"&gt;
        &lt;span data-box="quote" &gt;&lt;/span&gt;
    &lt;/div&gt;      
    &lt;!-- BIRD 2 --&gt;
    &lt;div class="box bird2"&gt;
        &lt;span data-box="box bird2" &gt;&lt;/span&gt;
    &lt;/div&gt;        
&lt;/div&gt;



&lt;div class="container-fluid"&gt;
    &lt;div id="" class="row meaningImg"&gt;
        &lt;div class="background"&gt;                        
            &lt;a href="../public/img/TALLPART1.png"&gt;
              &lt;img class="" src="../public/img/TALLPART1.png" class="meaningImg"&gt;
            &lt;/a&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;      

&lt;script&gt;
    $(document).ready(function(){
    $('html, body').animate({
        scrollTop: $(".bird1").offset().top}, 5000),
        scrollLeft: $('.quote').offset().top}, 5000);
});


&lt;/script&gt;
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);
});