[TUTORIAL] Efeito Back to Top com uso de javascript

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

[TUTORIAL] Efeito Back to Top com uso de javascript

Mensagem por while em 10/08/16, 07:21 pm

Back to top somente com javascript

As vezes gostaríamos de ter um efeito que faça com que possamos subir até ao topo do fórum. Neste tutorial vamos poder fazer o efeito Back to top somente com o uso de javascript.

--> Tutoriais, dicas e astúcias <--
Back to top somente com javascript

- Paginas Javascript:
As páginas javascript ativas em seu fórum possibilita inserir scripts e jquery para personalizar seu fórum, contudo é importante saber que qualquer script encontrado na internet acabam por não surgir efeito nos fóruns.

Painel de controle :seta2: Modulos :seta2: HTML & JavaScript :seta2: "Aba" Gestão dos códigos JavaScripts
Seta Título Correspondente ao nome da página JavaScript/jQuery que será criada.
Seta Localização- São destinados os devidos locais para onde você aplicará os efeitos do JavaScript nos fóruns. No nosso caso, aplicaremos em todas as paginas.
Seta Código JavaScript Campo destinado para receber os códigos JavaScript e jQuery.
Seta Habilitar o gerenciamento dos códigos JavaScript Ao selecionar a opção sim, estará ativando a função páginas Javascript no seu fórum. Se selecionar não, as páginas serão desabilitadas no fórum.

- Código a ser usado:
Coloque esse código no conteúdo do javascript:

PHPBB3
Código:
$(function() {
    $('#page-footer').append('<a href="#top"><img src="http://i21.servimg.com/u/f21/18/45/41/65/top10.png" title="Voltar ao topo" alt="Voltar ao topo"></a><style>a[href="#top"] { background:#000;left:650px;border: 1px solid white; height: 16px !important; width: 18px !important; padding: 10px; position: absolute !important; margin-top: 10px !important; border-radius: 50%; }</style>');
});

PHPBB2
Código:
$(function() {
    $('#page-footer').append('<a href="#top"><img src="http://i21.servimg.com/u/f21/18/45/41/65/top10.png" title="Voltar ao topo" alt="Voltar ao topo"></a><style>a[href="#top"] { background:#000;left:650px;border: 1px solid white; height: 16px !important; width: 18px !important; padding: 10px; position: absolute !important; margin-top: 10px !important; border-radius: 50%; }</style>');
});

PUNBB
Código:
$(function() {
    $('#pun-foot').append('<a href="#top"><img src="http://i21.servimg.com/u/f21/18/45/41/65/top10.png" title="Voltar ao topo" alt="Voltar ao topo"></a><style>a[href="#top"] { background:#000;left:650px;border: 1px solid white; height: 16px !important; width: 18px !important; padding: 10px; position: absolute !important; margin-top: 10px !important; border-radius: 50%; }</style>');
});

INVISION
Código:
$(function() {
    $('#gfooter').append('<a href="#top"><img src="http://i21.servimg.com/u/f21/18/45/41/65/top10.png" title="Voltar ao topo" alt="Voltar ao topo"></a><style>a[href="#top"] { background:#000;left:650px;border: 1px solid white; height: 16px !important; width: 18px !important; padding: 10px; position: absolute !important; margin-top: 30px !important; border-radius: 50%; }</style>');
});




© Fórum dos Fóruns
Se tiver alguma dúvida relacionada com este tópico crie um tópico com o seguinte título:
Fazer efeito Back to top somente com javascript
avatar

while
Hiperativo

Masculino
Inscrito dia : 24/04/2016
Mensagens : 3152
Pontos Ativos : 4600

Ver perfil do usuário http://www.ajuda.forumeiros.com https://www.facebook.com/profile.php?id=100012157981279

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