[Tutorial]Voltar ao topo Personalizado

Nome do Arquivo: [Tutorial]Voltar ao topo Personalizado
Autor: Victor Menezes
Funcionalidade: Todas as versões
Categoria: Recursos de Outros Autores

Bom galera!!!
mais um código que eu trouxe,para o pessoa que tem um fórum grande,ou quer deixar mais sofisticado,então me de like antes,kkkkk!XD

como sabem antes de tudo o código é meu int se for postar la no cafundó,já sabe né!!!!

vamos nessa,let's go!

Adicionaremos um Css aqui:

Painel::Visualização::Imagens E cores::cores::folha estilo CSS; adicionaremos o seguinte

Código:


/*victor Meneezs*/
.ctrright {
background: rgba(45, 45, 158, 0.05)  url(http://i.imgur.com/orGv2fs.png)no-repeat center;
width: 50px;
height: 100%;
z-index: 0;
position: fixed;
top: 0;
right:0;
opacity: 0.2;
/*fim do go top*/
}

vamos adicionar um Java script assim:
Nome:qualquer um
investimento:Todas as páginas
Código JavaScript * :coloque isso:

Código:

jQuery(document).ready(function() {

   jQuery('body').append('<div class="button-up" style="background: rgba(45, 45, 158, 0.05) url(http://i.imgur.com/orGv2fs.png)no-repeat center;width: 50px;height: 100%;z-index: 0;position: fixed;top: 0;right: 0;opacity: 0.2;"></div>');
      
   jQuery (window).scroll (function () {
      if (jQuery (this).scrollTop () > 100) {
         jQuery ('.button-up').fadeIn();
      } else {
         jQuery ('.button-up').fadeOut();
      }
   });
   
   jQuery('.button-up').click(function(){
      jQuery('body,html').animate({
            scrollTop: 0
        }, 0);
        return false;
   });
   
   jQuery('.button-up').hover(function() {
         jQuery(this).animate({
            'opacity':'1.0',
         }).css({'background-color':'rgba(45, 45, 158, 0.05)','color':'rgba(45, 45, 158, 0.05)'});
      }, function(){
         jQuery(this).animate({
            'opacity':'0'
         }).css({'background-color':'none','color':'rgba(45, 45, 158, 0.05)'});;
   });
      
});

resultado:
[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]
o gif é so como vai ficar mais se aperta ali o forum vai pro topo,com um efeito muito loko,dai-me like?

[sucesso=Tutorial aceito]Movido para a área correspondente.[/sucesso]

Tive que mecher no código CSS pra funfar no meu fórum.

 Só tirei a descrição final e a parte de opacity.
 Obrigado, recurso muito elegante.

Código:

/*victor Meneezs*/
.ctrright {
background: rgba(45, 45, 158, 0.05) url(http://i.imgur.com/orGv2fs.png) no-repeat center;
width: 50px;
height: 100%;
z-index: 0;
position: fixed;
top: 0;
right: 0;
}

psicop escreveu:Tive que mecher no código CSS pra funfar no meu fórum.

 Só tirei a descrição final e a parte de opacity.
 Obrigado, recurso muito elegante.

Código:

/*victor Meneezs*/
.ctrright {
background: rgba(45, 45, 158, 0.05) url(http://i.imgur.com/orGv2fs.png) no-repeat center;
width: 50px;
height: 100%;
z-index: 0;
position: fixed;
top: 0;
right: 0;
}

acho que bugou vou modificar,para dar certo com todo mundo,obrigado pelo toque!!! 

Não consigo ver mais nenhum tópico
a maioria dos tópico so mostra um codigo e mais nada:

[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem] [Tutorial]Voltar ao topo Personalizado em Qua 17 Jul 2013, 01:27

Code        
expand
  
select
  
popup
 

[list=linenums]

[*]

Código:

/*victor Meneezs*/

[*]

Código:

.ctrright {

[*]

Código:

background: rgba(45, 45, 158, 0.05)  url(http://i.imgur.com/orGv2fs.png)no-repeat center;

[*]

Código:

width: 50px;

[*]

Código:

height: 100%;

[*]

Código:

z-index: 0;

[*]

Código:

position: fixed;

[*]

Código:

top: 0;

[*]

Código:

right:0;

[*]

Código:

opacity: 0.2;

[*]

Código:

/*fim do go top*/

[*]

Código:

}

[/list]