<div id="menu" class='source'>
<ul>
<!--
No href dos links é necessario
colocar uma ancora com o mesmo valor da
da div que contem o conteudo
<li><a href="#contato" -->class='menu'>contato</a></li>
<li><a href="#contato"href="#quemsomos" class='menu'>contato<class='menu'>quemsomos</a></li>
<li><a href="#quemsomos"href="#redessociais" class='menu'>quemsomos<class='menu'>redessociais</a></li>
<li><a href="#redessociais"href="#teste" class='menu'>redessociais<class='menu'>Teste</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>
<div id="teste" class='source'><h2>Teste<h2></div>
.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;
}
#teste{
left:500px;
top:700px;
background:#cccccc;
}
$(document).ready(function(){
/* Adicionando$(".menu").on("click",function(e){
evento de click para os links do menu*// Pega as dimensões da janela
var W = $(".menu"window).onwidth("click",function);
var H = $(ewindow){.height();
/*selecionando
a div do conteúdo a ser posicionada* // Pega as coordenadas e dimensões do elemento
var elem = $($(this).attr("href"));
var x = elem.position().left; // pegando coordenada X
var y = elem.position().top;
// pegando coordenada Y var h = elem.height();
var w = elem.width();
/*
// Calcula Setandoas animaçãocoordenadas paraque a divtela paitem que contemser todorolada opara conteúdocentralizar o elemento
x -= noW/2 meu- casow/2;
o body
y -= *H/2 - h/2;
$("body").animate({scrollTop:y,scrollLeft:x},400,"swing",function() {
var x = $("body").scrollLeft();
var y = $("body").scrollTop();
$("#menu").css({top:y,left:x});
});
e.preventDefault();
})
})
Link do exemplo no jsfiddleLink do exemplo no jsfiddle
Créditos a edição do @LuizVieira pela colaboração na solução.