Horizontal scroll to anchor

Question

I have a site that its horizontally navigated.

here's the code:

<ul>
    <li><a href="#box-1"></a></li>
    <li><a href="#box-2"></a></li>
    <li><a href="#box-3"></a></li>
    <li><a href="#box-4"></a></li>
    <li><a href="#box-5"></a></li>
    <li><a href="#box-6"></a></li>
    <li><a href="#box-7"></a></li>
    <li><a href="#box-8"></a></li>
    <li><a href="#box-9"></a></li>
    <li><a href="#box-10"></a></li>
</ul>
<div id="content">
    <div id="box-1"></div>
    <div id="box-2"></div>
    <div id="box-3"></div>
    <div id="box-4"></div>
    <div id="box-5"></div>
    <div id="box-6"></div>
    <div id="box-7"></div>
    <div id="box-8"></div>
    <div id="box-9"></div>
    <div id="box-10"></div>
</div>

Each box have 300px width. But when i click, if its visible in the resolution area it wont scroll to the box. What im trying to do is, if i click for example <a href="#box-3"> it'll bring me to the div #box-3 but it'll be the first on the left and others div must be hidden. It only hides others div when the resolution is very little, it works perfectly, but if the resolution is very wide it wont work..

Answer 1

Something like:

$(document).ready(function() {

    $('ul>li>a').bind('click',function(event){
        var $anchor = $(this);

        $('html, body').stop().animate({
            scrollLeft: $($anchor.attr('href')).offset().left
        }, 1000);
        event.preventDefault();
    });

});

If youre trying to scroll horizontally between few elements this should do it.

Here is another reference: Link

Answer 2

If I understood well, you need to scroll horizontally and each "screen" have a full-page width. If this is the case, you don't need javascript but you can make it only with css, unless you need to utilize smooth scrolling between "screens".

Without the use of js you just need to make each box's width 100% and have the content within a child.

Check this fiddle to get the idea