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

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

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

Mensagem por Hancki 22.06.10 21:50

[TUTORIAL] Botão de fim e topo da página Html10 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:

[TUTORIAL] Botão de fim e topo da página Logo 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>

[TUTORIAL] Botão de fim e topo da página Logo 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>

[TUTORIAL] Botão de fim e topo da página Logo 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="https://2img.net/i/bl/logo.png" onclick=...


Imagens usadas nos códigos
Topo:[TUTORIAL] Botão de fim e topo da página Up-ico10Fim:[TUTORIAL] Botão de fim e topo da página Down-i10

- 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)
[TUTORIAL] Botão de fim e topo da página Tgh11


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: [TUTORIAL] Botão de fim e topo da página Sem_ta19


(carregue na imagem para aumentar)
[TUTORIAL] Botão de fim e topo da página Hjk11

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


[TUTORIAL] Botão de fim e topo da página Act_bottom 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
Hancki

Hancki
Membro Entusiasta

Membro desde : 03/10/2009
Mensagens : 8195
Pontos : 12250

https://ajuda.forumeiros.com/

Ir para o topo Ir para baixo

Ver o tópico anterior Ver o tópico seguinte Ir para o topo

- Tópicos semelhantes

Permissões neste sub-fórum
Não podes responder a tópicos