Entrar
Os membros mais ativos do mês
Nenhum usuário |
Quem está conectado?
Há 4 usuários online :: 0 registrados, 0 invisíveis e 4 visitantes :: 1 motor de buscaNenhum
[ Ver toda a lista ]
O recorde de usuários online foi de 23 em Seg Jun 08, 2020 3:43 am
Últimos assuntos
[TUTORIAL] Botão de fim e topo da página
Web ASA Fórum | Oficial :: Geral :: :: Serviços Web Sites :: Suporte Forumeiros :: Forumeiros & Você :: Tutoriais, dicas e astúcias :: Scripts HTML, BBCode e Javascript
Página 1 de 1
[TUTORIAL] Botão de fim e topo da página
[Tens de ter uma conta e sessão iniciada para poderes visualizar 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
Botão de fim e topo da página
1º - Os códigos que serão usados para cada versão:
phpBB3 e phpBB2 |
- Código: [Tens de ter uma conta e sessão iniciada para poderes visualizar 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>
PunBB |
- Código: [Tens de ter uma conta e sessão iniciada para poderes visualizar 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>
Invision |
- Código: [Tens de ter uma conta e sessão iniciada para poderes visualizar 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="[Tens de ter uma conta e sessão iniciada para poderes visualizar este link]" onclick=...
- Mudamos somente a parte do link para a imagem que nós desejamos, pode ser qualquer uma!
Exemplo:
...<img src="[Tens de ter uma conta e sessão iniciada para poderes visualizar este link]" onclick=...
Imagens usadas nos códigos
Topo: | Fim: |
2º - 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 [Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem] Visualização [Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem] Home page [Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem] Geral [Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem] Mensagem na Home Page
(carregue na imagem para aumentar)
[Tens de ter uma conta e sessão iniciada para poderes visualizar este link] [Tens de ter uma conta e sessão iniciada para poderes visualizar este link]
[Tens de ter uma conta e sessão iniciada para poderes visualizar este link] [Tens de ter uma conta e sessão iniciada para poderes visualizar este link]
Pode ainda preferir colocar em todas as páginas do fórum!
Para isso, aceda a:
Painel de Controle [Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem] Módulos [Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem] Portal & Widgets [Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem] Gestão dos widgets do fórum
Procure o seguinte botão e clique nele: [Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]
(carregue na imagem para aumentar)
[Tens de ter uma conta e sessão iniciada para poderes visualizar este link] [Tens de ter uma conta e sessão iniciada para poderes visualizar este link]
[Tens de ter uma conta e sessão iniciada para poderes visualizar este link] [Tens de ter uma conta e sessão iniciada para poderes visualizar este link]
Título Coloque o seguinte título: - Ele ficará oculto. |
Table-Type Selecione 'Não' para que não fique um widget a mais. |
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
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 |
Tópicos semelhantes
» [TUTORIAL] Logo rotativo
» [TUTORIAL] Formulário de Postagens
» [TUTORIAL] Logo aleatório
» [TUTORIAL] Enfeites de natal
» [TUTORIAL] O que são bots e sua finalidade
» [TUTORIAL] Formulário de Postagens
» [TUTORIAL] Logo aleatório
» [TUTORIAL] Enfeites de natal
» [TUTORIAL] O que são bots e sua finalidade
Web ASA Fórum | Oficial :: Geral :: :: Serviços Web Sites :: Suporte Forumeiros :: Forumeiros & Você :: Tutoriais, dicas e astúcias :: Scripts HTML, BBCode e Javascript
Página 1 de 1
Permissões neste sub-fórum
Não podes responder a tópicos
|
|
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
Sáb maio 19, 2012 9:49 am por Alisson Silva
» [Galeria] Gabriel Schiavi - Atualizado (20/02 - !5:21)
Sáb 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