Question

i dont know what i’m doing wrong, but if i put the option {axis:'x'} on this plugin, the scroll don’t work

my html code:

<div id="wrap">

    <div id="main" class="container">

        <div id="wrapper">
            <div id="mask">

                <div id="item0" class="item">
                    <a name="item0"></a>
                    <div class="conteudo">
                        aaaa
                    </div>
                </div>

                <div id="item1" class="item">
                    <a name="item1"></a>
                    <div class="conteudo">
                        bbbbs
                    </div>
                </div>          

            </div>
        </div>

    </div>

</div>



<div class="wrap_menu">
            <ul class="menu">
                <li><a href="#item1" class="panel">EMPRESA</a></li>
                <div class="traco"></div>
                <li><a href="#item2" class="panel">SERVIÇOS</a></li>
                <div class="traco"></div>
                <li><a href="#item3" class="panel">EVENTOS</a></li>
                <div class="traco"></div>
                <li><a href="#item4" class="panel">VJ</a></li>
                <div class="traco"></div>
                <li><a href="#item5" class="panel">PARCEIROS</a></li>
                <div class="traco"></div>
                <li><a href="#item6" class="panel">CONTATO</a></li>
            </ul>
        </div>

my css code:

html, body, #wrap {height: 100%;}

body > #wrap {height: auto; min-height: 100%;}

body{
    font-family:'Pontano Sans', sans-serif;
    color:#FFF;
    background:#110030 url(../imagens/fundo_site.jpg) no-repeat center center fixed;
}

#main {overflow:auto;
    padding-bottom: 117px;}  /* deve ter a mesma altura do rodapé */
#wrapper {
    position:absolute;
    width:100%;
    height:100%;
    top:0;
    left:0;
    background-color:#ccc;
    overflow:hidden;
}

#mask {
    width:100%;
    height:100%;
    /*background:#FFCC00;*/
}

.item {
    width:100%;
    height:100%;
    float:left;
}

#item0{
    background: #000 url(../imagens/bkg/fundo_site.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

#item1{
    background: #000 url(../imagens/bkg/fundo_site2.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

.conteudo {
    position:relative;
    width:960px;
    height:420px;
    margin: 0 auto 150px;
    left:50%;
    margin-left:-480px;
    background:url(../imagens/fundo_conteudo.png);
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
}

.clear {
    clear:both;
}

.item:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -0.25em; /* Adjusts for spacing */
}

/* The element to be centered, can
   also be of any width and height */ 
.conteudo {
  display: inline-block;
  vertical-align: middle;
}

my script code:

$(document).ready(function() {

        $('a.panel').click(function (e) {
            e.preventDefault();
            //reset and highlight the clicked link
            $('a.panel').removeClass('ativo');
            $(this).addClass('ativo');

            //grab the current item, to be used in resize function
            current = $(this);

            //scroll it to the destination
            //$('.item').hide();
            //$((this).attr('href')).add('.current').show();
            //$('.item').show();
            $('#wrapper').scrollTo($(this).attr('href'), 2000,{axis:'y'});


        });

    });

i try too to use this way:

$('#wrapper').animate({scrollLeft:$(this).attr('href')},2000);

but don’t works too!

what i’m doing wrong?

Answer 1

For basic functionality, try replacing

$('#wrapper').scrollTo($(this).attr('href'), 2000,{axis:'y'});

with

$('#wrapper').scrollLeft($($(this).attr('href')).offset().left);

This code should get set the scroll correctly. In order to animate the panel to slide to this position, try this code:

$('#wrapper').animate({scrollLeft: $($(this).attr('href')).offset().left}, 2000);

EDIT:

In the case of your site, the elements are above and below each other. Currently, you can use this code in order to cause a transition:

$('#wrapper').animate({scrollTop: $($(this).attr('href')).offset().top}, 2000);

There are CSS and site-structure changes you can make to cause the transition to occur via a left-scroll, and to make only the content within the black centered box make the transition. Let me know if this kind of functionality is what is intended, and I’ll provide for you some example markup.