Logo Questions Linux Laravel Mysql Ubuntu Git Menu

Horizontal scroll to anchor

I have a site that its horizontally navigated.

here's the code:

    <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>
<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>

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..

like image 671
Ramon Vasconcelos Avatar asked Mar 24 '23 09:03

Ramon Vasconcelos

2 Answers

Something like:

$(document).ready(function() {

        var $anchor = $(this);

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


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

Here is another reference: Link

like image 61
David Fariña Avatar answered Apr 01 '23 20:04

David Fariña

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

like image 20
otinanai Avatar answered Apr 01 '23 19:04