Skip to main content
replaced http://pt.stackoverflow.com/ with https://pt.stackoverflow.com/
Fonte Link

Créditos a ediçãoedição do @LuizVieira pela colaboração na solução.

Créditos a edição do @LuizVieira pela colaboração na solução.

Créditos a edição do @LuizVieira pela colaboração na solução.

adicionou 501 caracteres ao conteúdo
Fonte Link
Tuyoshi Vinicius
  • 4,1mil
  • 2
  • 25
  • 48
<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.

<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="#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>
.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;        
}
$(document).ready(function(){
    /* Adicionando evento de click para os links do menu*/
    $(".menu").on("click",function(e){
        /*selecionando a div do conteúdo a ser posicionada*/
        var elem = $($(this).attr("href")); 
        var x = elem.position().left; // pegando coordenada X
        var y = elem.position().top; // pegando coordenada Y
        
        /*
          Setando animação para a div pai que contem todo o conteúdo 
          no meu caso o body
        */
        $("body").animate({scrollTop:y,scrollLeft:x})

        e.preventDefault();
    })
})

Link do exemplo no jsfiddle

<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>
        <li><a href="#teste" 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(){
    $(".menu").on("click",function(e){
        // Pega as dimensões da janela
        var W = $(window).width();
        var H = $(window).height();
         
        // Pega as coordenadas e dimensões do elemento
        var elem = $($(this).attr("href"));
        var x = elem.position().left;
        var y = elem.position().top; 
        var h = elem.height();
        var w = elem.width();
        
        // Calcula as coordenadas que a tela tem que ser rolada para centralizar o elemento
        x -= W/2 - w/2;
        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 jsfiddle

Créditos a edição do @LuizVieira pela colaboração na solução.

adicionou 557 caracteres ao conteúdo
Fonte Link
Tuyoshi Vinicius
  • 4,1mil
  • 2
  • 25
  • 48

Tomei a liberdade de olhar o código do seu site e vi que a DIV que recebe o conteúdo é a #ib-main-wrapper seguindo o exemplo que estou postando você terá que substituir o $("body") da animação pela sua div que recebe o conteudo $("#ib-main-wrapper")


Tomei a liberdade de olhar o código do seu site e vi que a DIV que recebe o conteúdo é a #ib-main-wrapper seguindo o exemplo que estou postando você terá que substituir o $("body") da animação pela sua div que recebe o conteudo $("#ib-main-wrapper")

adicionou 557 caracteres ao conteúdo
Fonte Link
Tuyoshi Vinicius
  • 4,1mil
  • 2
  • 25
  • 48
Carregando
Fonte Link
Tuyoshi Vinicius
  • 4,1mil
  • 2
  • 25
  • 48
Carregando