Site com página "única"

[caioangarten 1]

Galera, me ajudem nisso por favor.

Gostaria de saber, uma base, ou o código usado para fazer, por exemplo, aqueles site que tem apenas uma página vertical gigante, e conforme você clica no menu, a barra de rolagem leva ela para baixo, sem a necessidade de ficar carregando a pagina etc...

 

Exemplo: http://www.eentipvanjip.nl

 

 

Valeu

[bruno_mosciatti 22]

simples!

 

você cria sua página normalmente, com divs e tudo mais.

Por exemplo:

 

<div id="topo"><h2>Aqui é topo</h2></div>

<div id="menu"><h2>Aqui é o menu</h2><ul><li><a href="#topo">Topo</a></li><li><a href="#noticias">Noticias</a></li><li><a href="#videos">Vídeos</a></li></ul></div>

<div id="noticias"><ul><li><h3>Noticia um</h3><p>Descrição da notícia</p></li><li><h3>Noticia Dois</h3><p>Descrição da notícia!</p></li></ul></div>

<div id="videos"><codigodoyoutube></codigodoyoutube>

 

e assim por diante!

Entendeu o esquema?

Invés de você direcionar o link para outra página, você direciona para um elemento com uma id, neste caso estamos direcionando para as divs.

[caioangarten 1]

Bruno muito obrigado,

mas essa parte eu até sabia, já usei em outros sites.

O problema é que, desse modo ele "pula" para a referência que eu dou, gostaria de saber, no caso do javascript, como fazer para ele "rolar" até a referência que eu dou. A minha dúvida é mais quanto ao modo de chegar até a referência do que fazê-la.

 

Desculpe se não me expressei corretamente na pergunta hahaha.

[bruno_mosciatti 22]

Bruno muito obrigado,

mas essa parte eu até sabia, já usei em outros sites.

O problema é que, desse modo ele "pula" para a referência que eu dou, gostaria de saber, no caso do javascript, como fazer para ele "rolar" até a referência que eu dou. A minha dúvida é mais quanto ao modo de chegar até a referência do que fazê-la.

 

Desculpe se não me expressei corretamente na pergunta hahaha.

 

Sua pergunta era como fazer uma página única e não como fazer o efeito de "suavidade" ao scrollar uma página.

 

Sendo assim, você precisa de javascript/jquery.

 

 

$('html, body').animate({

scrollTop: $("#vemaqui").offset().top

}, 2000);

<input type="button" onclick="$('html,body').animate({scrollTop: $('#vemaqui').offset().top}, 2000);" value="Veja Funcionando" >

[caioangarten 1]

Opa, valeu Bruno..... Agora sim!