Skip to main content
1 de 5
Tuyoshi Vinicius
  • 4,1mil
  • 2
  • 25
  • 48

Da pra fazer tanto usando JavaScript Puro quanto jQuery pelo que eu vi em seu projeto você já esta utilizando jQuery então montei um exemplo pra você utilizando jQuery pois o código fica mais simples.

HTML

<div id="menu" class='source'>
    <ul>
        <li><a href="#contato" class='menu'>contato</a></li>
        <li><a href="#quemsomos" class='menu'>quemsomos</a></li>
        <li><a href="#redessociais" class='menu'>redessociais</a></li>
    </ul>
</div>
<div id="contato" class='source'><h2>contato</h2></div>
<div id="quemsomos"  class='source'><h2>quemsomos</h2></div>
<div id="redessociais"  class='source'><h2>redessociais<h2></div>

CSS

.source{
    position:absolute;
    width:150px;
    height:150px;        
}
#contato{  
    left:50px;
    top:300px;   
    background:#f00;
}
#quemsomos{
    left:1500px;
    top:500px;   
    background:#0f0;
}
#redessociais{
    left:600px;
    top:2000px;   
    background:#00f;        
}

JavaScript

$(document).ready(function(e){
    $(".menu").on("click",function(){
        var elem = $($(this).attr("href"));
        var x = elem.position().left;
        var y = elem.position().top;
        $("body").animate({scrollTop:y,scrollLeft:x})
    })
})

Link do exemplo no jsfiddle

Tuyoshi Vinicius
  • 4,1mil
  • 2
  • 25
  • 48