Jquery scroll to target div moves horizontally

Question

I want to be able to scroll my page and when I hit a certain point I want a div to scroll horizontally across but I can't seem to achieve this..I had some jquery which alerted when the user hit the second section but I couldn't get it working, I now simply have an animate on my block but it's not working at all...can you help me please?

http://jsfiddle.net/AXsMR/

do you mean "when I click on a certain point", or "when I scroll down to a certain point"? — Giuseppe, Jul 23 '12 at 10:13

score 2 · Accepted Answer · answered Jul 23 '12 at 10:17

2

Is this what you're trying to achieve?

http://jsfiddle.net/Mu4ug/3/

When the user scrolls down to the second div, the animation begins.

answered Jul 23 '12 at 10:17

soupy1976

2,787
2
26
34

Yes this is great, how would I reverse it so if the user scrolled back up the div would go back to its original state? Thanks! – green_arrow Jul 23 '12 at 10:42
Here's one way ([jsfiddle](http://jsfiddle.net/VWqyw/1/)) but you could make that code simpler, I just did it quickly – soupy1976 Jul 23 '12 at 10:47
Thanks, that at least gets me on the right track! :D Much appreciated, thank you!!! – green_arrow Jul 23 '12 at 10:48

score 1 · Answer 2 · edited May 23 '17 at 12:16

First of all, I wouldn't use section tags, I'd use DIVS. Also, I'd place all my "sections" (divs) inside a master div with a specified width (to prevent vertical stacking)

Then on scroll, I'd use the jQuery offset().left method to get the position of the section you wish to scroll to (OR) set a predefined value for an even scroll, then call the animate function.

<div style='width: 4000px' id='masterDiv'>
      <div id='section1' class='innerDiv' style='width: 1000px'></div>
      <div id='section2' class='innerDiv' style='width: 1000px'></div>
      <div id='section3' class='innerDiv' style='width: 1000px'></div>
      <div id='section4' class='innerDiv' style='width: 1000px'></div>
</div>

You can determine the direction of the scroll here > How can I determine the direction of a jQuery scroll event? (slide down moves the screen right, slide up moves the screen left)

And then use something like this..

var lastScrollTop = 0;
$(window).scroll(function(event){
   var st = $(this).scrollTop();
   if (st > lastScrollTop){
       $("#masterDiv").animate({ "left": "+=180px" }, 1000);
   } else {
      $("#masterDiv").animate({ "right": "+=180px" }, 1000);
   }
   lastScrollTop = st;
});

Needs some testing, but should help.

score 0 · Answer 3 · answered Jan 13 '17 at 07:44

You can also use this function....

function moveToTargetDiv(target, outer){
    var out = $(outer);
    var tar = $(target);
    var x = out.width();
    var y = tar.outerWidth(true);
    var z = tar.index();
    var q = 0;
    var m = out.find('li');

    for(var i = 0; i < z; i++){
        q+= $(m[i]).outerWidth(true)+4;
    }

    $('#tabUl').animate({
    scrollLeft: Math.max(0, q )
    }, 800);
    return false;
}

For Example : https://jsfiddle.net/dinesh10641/mvqxbjvs/

Jquery scroll to target div moves horizontally

3 Answers3