Question

I have few divs set next to each other making a horizontal scrolling page.

Currently I am using animate scrollLeft to navigate through the div’s but I want when you visit the site to begin from the middle.

The divs are like this:

Div1 #Div2 #Div3 #Div4 #Div5

and I want viewers to start from #Div3.

How can I achieve that? I tried scrollLeft(); but didn’t work.

Answer 1

This is what you need:

$('html, body').animate({scrollLeft: $('#section2').offset().left});

Also set the body to visibility:hidden so in case of lag it doesn’t display the page.

After you call the animation set the content visibility to visible.

Example:

$('html, body').animate({scrollLeft: $('#div3').offset().left});
$('html, body').css({opacity: 0.0, visibility: "visible"}).delay(400).animate({opacity: 1.0});