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

Ver o tópico anterior Ver o tópico seguinte Ir em baixo

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

Mensagem por Hancki em 22/06/10, 05:50 pm

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:

phpBB3 e phpBB2
Código:
<div style="position: fixed; top: 0px; right: 0px;"><img src="http://i68.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="http://i68.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:
<div style="position: fixed; top: 0px; right: 0px;"><img src="http://i68.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="http://i68.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:
<div style="position: fixed; top: 0px; right: 0px;"><img src="http://i68.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="http://i68.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:
    Mudamos somente a parte do link para a imagem que nós desejamos, pode ser qualquer uma!
    Exemplo:
    ...<img src="http://illiweb.com/bl/logo.png" onclick=...


Imagens usadas nos códigos
Topo:Fim:

- 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 Seta Visualização Seta Home page Seta Geral Seta Mensagem na Home Page

(carregue na imagem para aumentar)


Pode ainda preferir colocar em todas as páginas do fórum!
Para isso, aceda a:
Painel de Controle Seta Módulos Seta Portal & Widgets Seta Gestão dos widgets do fórum
Procure o seguinte botão e clique nele:


(carregue na imagem para aumentar)

Seta Título Coloque o seguinte título:   - Ele ficará oculto.
Seta Table-Type Selecione 'Não' para que não fique um widget a mais.
Seta 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:
Botão de fim e topo da página
avatar

Hancki
Principal contribuidor
Principal contribuidor

Masculino
Inscrito dia : 03/10/2009
Mensagens : 8048
Pontos Ativos : 12033

Ver perfil do usuário http://programacaoweb.forumeiros.com/ https://www.facebook.com/djtomoficial https://www.facebook.com/djtomoficial

Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo

- Tópicos similares

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