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

Answer 3

Based on David Fariña's answer, this handles also coming to the page

function horizontal_anchor(){
 var hash=decodeURIComponent(location.hash);/*decode special chars like spaces*/
 jQuery('html, body').stop().animate({
 scrollLeft: jQuery(hash).offset().left
 }, 1000);
}

jQuery(document).ready(function(){  
        //on load
        if(location.hash) horizontal_anchor();
        //on url change
        jQuery(window).on('hashchange',function(event){
            horizontal_anchor()
            event.preventDefault();
        });
});

Answer 4

If I understand this correctly, you have a fixed-width area you want displayed one at a time? Like this?

<ul>
    <li><a href="#box-1">menu item 1</a></li>
    <li><a href="#box-2">menu item 2</a></li>
    <li><a href="#box-3">menu item 3</a></li>
    <li><a href="#box-4">menu item 4</a></li>
</ul>

<div id="container">
    <div id="content">
        <div class="box-container" id="box-1">
            <div class="box-contents">stuff</div>
        </div>
        <div class="box-container" id="box-2">
            <div class="box-contents">stuff</div>
        </div>
        <div class="box-container" id="box-3">
            <div class="box-contents">stuff</div>
        </div>
        <div class="box-container" id="box-4">
            <div class="box-contents">stuff</div>
        </div>
    </div>
</div>

#container { width: 100%; overflow: hidden;}
#content { width: 400%; }   
.box-container { width: 25%; background-color: red; float: left; display: block;}
.box-contents { height: 300px; width: 300px; text-align: left; background-color: blue; }

jsfiddle example here: http://jsfiddle.net/8B3hL/

obviously you would need to link those menu items, but you get the idea