Conectar-se

Esqueci minha senha

Os membros mais ativos do mês

Quem está conectado
2 usuários online :: Nenhum usuário registrado, Nenhum Invisível e 2 Visitantes

Nenhum

[ Ver toda a lista ]


O recorde de usuários online foi de 19 em Ter Jan 03, 2012 9:38 am
Últimos assuntos
» Equipe Web ASA Fórum
Dom Jun 24, 2012 11:15 am por Alisson Silva

» [Re-Apresentação] Fábio
Sex Maio 25, 2012 4:45 pm por Fábio

» PixelZIP ~ design&programção em só lugar
Sex Maio 25, 2012 4:44 pm por Fábio

» Pedido de logo
Dom Maio 20, 2012 10:06 am por Alisson Silva

» Kernel - Apresentação
Sab Maio 19, 2012 9:49 am por Alisson Silva

» [Galeria] Gabriel Schiavi - Atualizado (20/02 - !5:21)
Sab Maio 19, 2012 9:48 am por Alisson Silva

»  HEBBO HOTEL 24 HORAS ONLINE !!
Sex Maio 04, 2012 7:20 pm por Alisson Silva

» Pedido de Layout
Sex Maio 04, 2012 5:23 pm por Fonsecca

» [RESOLVIDO]TV CCE HPS 2071-D (IMAGEM SÓ EMBAIXO, ACIMA, LINHAS DE RETRAÇO E FAIXA PRÊTA NO TOPO DA TELA).
Qua Abr 11, 2012 4:07 pm por Fry

» [contato] Deixo aqui meus contatos virtuais
Qua Abr 11, 2012 3:25 pm por Fry


[TUTORIAL] Botão de fim e topo da página

Ir em baixo

[TUTORIAL] Botão de fim e topo da página

Mensagem por Fry em Sab Dez 31, 2011 8:21 am

[Você precisa estar registrado e conectado para ver esta imagem.] Botão de fim e topo da página


Por vezes é chato quando o nosso fórum é bastante extenso e precisamos de fazer um scroll que demora sempre um pouco. Neste tutorial, irá aprender a como criar dois botões de topo e final de página, sempre visíveis na janela do navegador.


--> Tutoriais, dicas e astúcias <--
Botão de fim e topo da página


- Os códigos que serão usados para cada versão:

[Você precisa estar registrado e conectado para ver esta imagem.] phpBB3 e phpBB2
Código: [Você precisa estar registrado e conectado para ver este link.]
<div style="position: fixed; top: 0px; right: 0px;"><img src="https://i.servimg.com/u/f68/14/38/92/90/down-i10.png" onclick="$('html,body').animate({scrollTop: $('#page-footer').offset().top}, 2000);" title="Fundo da página"></div><div style="position: fixed; bottom: 0px; right: 0px;">
<img src="https://i.servimg.com/u/f68/14/38/92/90/up-ico10.png" onclick="$('html,body').animate({scrollTop: $('#phpbb').offset().top}, 2000);" title="Topo da página"></div>


[Você precisa estar registrado e conectado para ver esta imagem.] PunBB
Código: [Você precisa estar registrado e conectado para ver este link.]
<div style="position: fixed; top: 0px; right: 0px;"><img src="https://i.servimg.com/u/f68/14/38/92/90/down-i10.png" onclick="$('html,body').animate({scrollTop: $('#pun-foot').offset().top}, 2000);" title="Fundo da página"></div><div style="position: fixed; bottom: 0px; right: 0px;">
<img src="https://i.servimg.com/u/f68/14/38/92/90/up-ico10.png" onclick="$('html,body').animate({scrollTop: $('#top').offset().top}, 2000);" title="Topo da página"></div>


[Você precisa estar registrado e conectado para ver esta imagem.] Invision
Código: [Você precisa estar registrado e conectado para ver este link.]
<div style="position: fixed; top: 0px; right: 0px;"><img src="https://i.servimg.com/u/f68/14/38/92/90/down-i10.png" onclick="$('html,body').animate({scrollTop: $('#gfooter').offset().top}, 2000);" title="Fundo da página"></div><div style="position: fixed; bottom: 0px; right: 0px;">
<img src="https://i.servimg.com/u/f68/14/38/92/90/up-ico10.png" onclick="$('html,body').animate({scrollTop: $('#ipbwrapper').offset().top}, 2000);" title="Topo da página"></div>

Pode sempre ter dúvidas a modificar as imagens e agora aprenderá a como mudar e onde mudar.
Um código de qualquer versão, tem o código da imagem, como exemplo este, que se encontra no início e no fim do código:
...<img src="[Você precisa estar registrado e conectado para ver este link.]" onclick=...
    Mudamos somente a parte do link para a imagem que nós desejamos, pode ser qualquer uma!
    Exemplo:
    ...<img src="[Você precisa estar registrado e conectado para ver este link.]" onclick=...


Imagens usadas nos códigos
Topo:[Você precisa estar registrado e conectado para ver esta imagem.]Fim:[Você precisa estar registrado e conectado para ver esta imagem.]


- A colocação do código no respectivo lugar:
Para o código ter efeito, tem de ser colocado em algum sítio. Recomendo na página inicial, pois costuma ser a com maior extensão!
Para isso, aceda a:
Painel de Controle [Você precisa estar registrado e conectado para ver esta imagem.] Visualização [Você precisa estar registrado e conectado para ver esta imagem.] Home page [Você precisa estar registrado e conectado para ver esta imagem.] Geral [Você precisa estar registrado e conectado para ver esta imagem.] Mensagem na Home Page

(carregue na imagem para aumentar)
[Você precisa estar registrado e conectado para ver este link.][Você precisa estar registrado e conectado para ver este link.] [Você precisa estar registrado e conectado para ver este link.]
[Você precisa estar registrado e conectado para ver esta imagem.]



Pode ainda preferir colocar em todas as páginas do fórum!
Para isso, aceda a:
Painel de Controle [Você precisa estar registrado e conectado para ver esta imagem.] Módulos [Você precisa estar registrado e conectado para ver esta imagem.] Portal & Widgets [Você precisa estar registrado e conectado para ver esta imagem.] Gestão dos widgets do fórum
Procure o seguinte botão e clique nele: [Você precisa estar registrado e conectado para ver esta imagem.]


(carregue na imagem para aumentar)
[Você precisa estar registrado e conectado para ver este link.][Você precisa estar registrado e conectado para ver este link.] [Você precisa estar registrado e conectado para ver este link.]
[Você precisa estar registrado e conectado para ver esta imagem.]


[Você precisa estar registrado e conectado para ver esta imagem.][Você precisa estar registrado e conectado para ver esta imagem.] Título Coloque o seguinte título: &nbsp; - Ele ficará oculto.
[Você precisa estar registrado e conectado para ver esta imagem.][Você precisa estar registrado e conectado para ver esta imagem.] Table-Type Selecione 'Não' para que não fique um widget a mais.
[Você precisa estar registrado e conectado para ver esta imagem.][Você precisa estar registrado e conectado para ver esta imagem.] Campo para o código Este é o campo que suporta o código. Nele, colocará o código de acordo com a sua versão.





© Fórum dos Fóruns


[Você precisa estar registrado e conectado para ver esta imagem.] Se tiver alguma dúvida relacionada com este tópico crie um tópico com o seguinte título:
[Dúvida] Botão de fim e topo da página
avatar
Fry
Admintradores
Admintradores

Posts Posts : 175
Idade Idade : 19
Respeito Respeito : 0
Web Moedas Web Moedas : 415

http://Em breve...

Voltar ao Topo Ir em baixo

Voltar ao Topo

- Tópicos similares

 
Permissão deste fórum:
Você não pode responder aos tópicos neste fórum