O primeiro passo é inserir uma linha de código para chamar o script "Smooth Scroll" da biblioteca jQuery:
<Script src = "https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"> </ script>
Copie e cole esta linha de código na cabeça do seu site e, especificamente, em "Configurações avançadas" de "propriedades do site".
Em seguida, você deve especificar os parâmetros de efeito Scroll animação suave colando as seguintes linhas em "Configurações avançadas", mas desta vez vá em "Propriedades da página", onde irá apresentar a sua navegação Âncoras:
<Script>
$ (Document) .ready (function () {
$ ('A [href * = "âncora -'] ') click (function () {// Ao clicar em um elemento.
página var = $ (this) .attr ('href'); // Página de Destino
var anchor = page.replace ('#', '');
coordena var = $ ('a [name = "" + âncora + "]") offset () top ..;
velocidade var = 750; // Duração da animação (em ms)
$ ('Html, body') animate ({scrollTop:} coordenadas, velocidade). // Go
return false;
});
});
</ Script>
O Conselho de equipa: a menos que você quiser alterar o comprimento da animação, nós aconselhamos que você não tocar o conteúdo deste código. Também deve ter cuidado para colar todo o código sem excluir nada, nem mesmo um único ponto e vírgula removido poderia amaldiçoar o script de modo geral, isso não vai funcionar! : - /
Sempre que coloca gentilmente âncoras
Você precisa perguntar a suas âncoras de HTML em locais estratégicos em sua página. Imagine um cenário: você tem a sua página inicial e que pretende apresentar a diferentes "seções" que podem ser acessados a partir do menu principal do site. Exemplo:
- Home (isso vai fazer um retorno ao topo da página)
- Sobre (a apresentar brevemente quem você é)
- Serviços (apresentação rápida de seus serviços)
- Portfolio (fancybox fotos para mostrar suas realizações)
- Contact (informações de contato)
Desde que você tem 5 seções em sua página, assim você terá em seu menu de 5 abas principais: Home, About, Serviços, Portfolio e Contact. Inevitavelmente, você vai ter que perguntar também 5 âncoras que permitem o acesso a diferentes seções.
Para ensiná-lo a pedir âncoras de HTML, nós convidamos você a ler ou reler o artigo que publicamos anteriormente neste blog, intitulado "Exposé âncoras de HTML"
Engrossar um pouco, criando o cardápio
Aqui é o passo que requer mais atenção de você (um pouco antes do café pode ser útil!): A criação do menu.
Para navegação âncoras de HTML funcionais devem menu de navegação é acessível e visível a qualquer momento pelo usuário. Que melhor do que, então, oferecer um menu que se move ao longo do deslocamento de sua página na tela do usuário!
Para criar o seu menu, você tem que inserir no topo de sua página, um elemento "Código HTML".Neste elemento "Código HTML", cole estas linhas de código:
<Div style = "position: fixed; text-align: left; height: 100%; width: 100%;
padding-top: 20px; ">
<A style = "
text-decoration: nenhum ; height: 100%; width: 100%; padding-left: 50px;
font-family: ' Abrir Sans '; font-size: 14px ; font-weight: bold ; color: # 000 "
onmouseover = "this.style.color = ' # fff '";
onmouseout = "this.style.color =" # 000 ";"
href = " # anchor-home "> guia Título 1 </a>
<A style =
"Text-decoration: none; height: 100%; width: 100%; padding-left: 15px;
font-family: 'Open Sans'; font-size: 14px; font-weight: bold; color: # 000 "
onmouseover = "this.style.color = '# FFF"; "
onmouseout = "this.style.color =" # 000 ";"
href = "# anchor-apropos"> guia Título 2 </a>
<A style =
"Text-decoration: none; height: 100%; width: 100%; padding-left: 15px;
font-family: 'Sem 0pen'; font-size: 14px; font-weight: bold; color: # 000 "
onmouseover = "this.style.color = '# FFF"; "
onmouseout = "this.style.color =" # 000 ";"
href = "#-âncora serviços"> guia Título 3 </a>
<A style =
"Text-decoration: none; height: 100%; width: 100%; padding-left: 15px;
font-family: 'Sem 0pen'; font-size: 14px; font-weight: bold; color: # 000 "
onmouseover = "this.style.color = '# FFF"; "
onmouseout = "this.style.color =" # 000 ";"
href = "# anchor-portfolio"> guia Título 4 </a>
<A style =
"Text-decoration: none; height: 100%; width: 100%; padding-left: 15px;
font-family: 'Open Sans'; font-size: 14px; font-weight: bold; color: # 000 "
onmouseover = "this.style.color = '# FFF"; "
onmouseout = "this.style.color =" # 000 ";"
href = "# anchor-contact"> guia Título 5 </a>
</ Div>
Você pode alterar o seguinte:
- Text-decoration: none, Sublinhado (sublinhado), etc.
- Font-family: nome da fonte usada em seu site (Arial, Sans Abertas, etc)
- Font-size: o tamanho da fonte
- Font-weight: bold ou normal
- Cor: código hexadecimal para a cor do seu guia para o estado normal
- Onmouseover..color: código hexadecimal para a cor do seu guia para o efeito hover. Eg #FFF
- Onmouseout ... color: código hexadecimal para a cor do seu guia uma vez que o mouse sobre a aba. Ex: # 000
- href = "# anchor-casa": nome de sua âncora.
- Guia Título: Ex: Home, About, Serviços, Portfolio, Fale Conosco
Se você gostaria de remover as abas em seu menu de navegação, basta apagar o código entre a tag e </a> <a>.
O tutorial está agora completo como o seu menu é criado. Testar os resultados, se divertir para alterar a aparência do menu de acordo com as necessidades e exigências do seu próprio site. E, claro, sinta-se livre para apresentar suas realizações comentar! Bom código para você!
Fonte: http://blogwebacappella.fr/2014/12/03/tutoriel-navigation-par-ancres-avec-effet-smooth-scroll/#more-3513
