[TUTORIAL] Efeito Back to Top com uso de 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.


1º - 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.

Título Correspondente ao nome da página JavaScript/jQuery que será criada.

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.

Código JavaScript Campo destinado para receber os códigos JavaScript e jQuery.

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.

2º - 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>');
});

---

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