Página 1 de 5

Botão volta ao topo

Enviado: 02 Mar 2012, 23:33
por Night Angel
Qual a URL do seu fórum: http://www.blackangelarts.com
Tipo de Hospedagem: Pago
Qual a versão do phpBB: phpBB 3.0.10
É um novo ou uma conversão: Update de uma versão phpBB3
Usuário de teste: Usuário: Night Angel Senha: 656565
Estilos instalados: Art_deluxe, X_Silver, ca_vintage_blue
Modificações instaladas: mChat (entre outros)
Qual seu nivel de experiência:: Iniciante
Quando começou o problema: Hoje
Descreva seu problema: Botão volta ao topo.

Gostaria de saber como eu faço para ter um botão assim.
Sendo que ele (o botão) simplesmente "arrasta" de volta ao topo da página.
E NÃO volta automaticamente..


Imagem do botão (um exemplo)
http://img404.imageshack.us/img404/9988/93123811.jpg

Link em um fórum que eu participo: funcionamento do botão
http://trader.speed-share.org/index.php

Re: Botão volta ao topo

Enviado: 03 Mar 2012, 00:24
por robra
E este Tópico: Imagem do Topo do Site.
Se encontrou a solução, então, poste uma mensagem lá com esta solução e marque-a com o "resolvido". OK ?


Após fazer uma busca no Google com o texto "buttons back top jquery", vários resultados apareceram e dentre eles:
- ‘Back to top’ link using jQuery
A página da demonstração do botão é AQUI.
Após entrar na página, vai ter um "hello" sem graça no início, mas aí você desce a barra de rolagem até o final da página e encontrará o botão. Ao clicar nele, verá que tem o mesmo efeito da página que você indicou como referência.
Confira e veja se é a mesma coisa.

Abraço. Imagem

Re: Botão volta ao topo

Enviado: 03 Mar 2012, 09:32
por Bruno Dias
opa, aproveitei o topico e ja coloquei no meu forum tb

:D

Re: Botão volta ao topo

Enviado: 03 Mar 2012, 19:35
por Night Angel
Robra.
Era exatamente isso que eu procurava..
Bem..vamos as perguntas..kkk
Onde exatamente eu devo criar a DIV? (em qual arquivo)
Em qual arquivo CSS eu devo acrescentar o
#toTop?
E por fim onde adicionar o script?

E caso eu queira trocar a imagem do botão é só editar o
#toTop?

Re: Botão volta ao topo

Enviado: 03 Mar 2012, 20:21
por robra
E este Tópico: Imagem do Topo do Site.
Se encontrou a solução, então, poste uma mensagem lá com esta solução e marque-a com o "resolvido". OK ?
Você marcou como "resolvido" mas não compartilhou a solução.
:arrow: Caso a solução tenha sido obtida sem ser pelas respostas postadas, então, compartilhe a solução postando-a e marcando esta mesma resposta com o "resolvido".

Abraço. Imagem

Re: Botão volta ao topo

Enviado: 03 Mar 2012, 20:39
por Night Angel
robra escreveu:
E este Tópico: Imagem do Topo do Site.
Se encontrou a solução, então, poste uma mensagem lá com esta solução e marque-a com o "resolvido". OK ?
Você marcou como "resolvido" mas não compartilhou a solução.
:arrow: Caso a solução tenha sido obtida sem ser pelas respostas postadas, então, compartilhe a solução postando-a e marcando esta mesma resposta com o "resolvido".

Abraço. Imagem
Mas então..
O tópico se encontrava em aberto..justamente pq eu não consegui resolver e ninguem conseguiu me ajudar..
Por isso estava aberto ainda..

Eu só coloquei como resolvido..
Pq vc pediu para que marcasse como resolvido..kkk

Re: Botão volta ao topo

Enviado: 03 Mar 2012, 21:44
por robra
Night Angel escreveu:
robra escreveu:
E este Tópico: Imagem do Topo do Site.
Se encontrou a solução, então, poste uma mensagem lá com esta solução e marque-a com o "resolvido". OK ?
Você marcou como "resolvido" mas não compartilhou a solução.
:arrow: Caso a solução tenha sido obtida sem ser pelas respostas postadas, então, compartilhe a solução postando-a e marcando esta mesma resposta com o "resolvido".

Abraço. Imagem
Mas então..
O tópico se encontrava em aberto..justamente pq eu não consegui resolver e ninguem conseguiu me ajudar..
Por isso estava aberto ainda..

Eu só coloquei como resolvido..
Pq vc pediu para que marcasse como resolvido..kkk
O tópico fala da imagem no topo do Fórum que não existe mais. O que existe hoje é um menu deslizante, estilo MAC. Não é isso ou estou enganado ?
Se não existe mais a imagem do topo, então você tem de postar lá uma resposta dizendo que substituiu a imagem por um menu deslizante e marcar esta resposta com o "resolvido", porque foi através da substituição da imagem pelo menu deslizante que o assunto do tópico foi resolvido. Ou não ?

Abraço. Imagem

Re: Botão volta ao topo

Enviado: 03 Mar 2012, 22:03
por robra
Bem... uma vez sendo o que você quer, então vou traduzir o conteúdo aqui:
1- Crie uma <div>, conforme mostrado abaixo...

Código: Selecionar todos

<div id="toTop">^ Voltar ao Topo</div> 
... e coloque-a no overall_footer.html de seu estilo em uso, antes da tag </body>, no final do arquivo.

2- As linhas abaixo configuram o estilo do botão:

Código: Selecionar todos

#toTop {
    width:100px;
    border:1px solid #ccc;
    background:#f7f7f7;
    text-align:center;
    padding:5px;
    position:fixed; /* this is the magic */
    bottom:10px; /* together with this to put the div at the bottom*/
    right:10px;
    cursor:pointer;
    display:none;
    color:#333;
    font-family:verdana;
    font-size:11px;
} 
Elas podem ser incluídas no arquivo overall_header.html OU no arquivo buttons.css do Prosilver OU no stylesheet.css do Subsilver2. Para incluí-las no overall_header.html, tem de colocá-las entre as tags <style></style>, ficando desta forma:

Código: Selecionar todos

<style>
#toTop {
	width:100px;
    border:1px solid #ccc;
    background:#f7f7f7;
    text-align:center;
    padding:5px;
	position:fixed; /* this is the magic */
    bottom:10px; /* together with this to put the div at the bottom*/
    right:10px;
    cursor:pointer;
    display:none;
    color:#333;
    font-family:verdana;
    font-size:11px;
}
</style> 
... e inseri-las antes da tag </head>.

3- O código JQuery abaixo é para ser incluído antes da tag </head>, no overall_header.html:

Código: Selecionar todos

<script src="{T_THEME_PATH}/jquery.js"></script>
<script type="text/javascript">
$(function() {
	$(window).scroll(function() {
		if($(this).scrollTop() != 0) {
			$('#toTop').fadeIn();	
		} else {
			$('#toTop').fadeOut();
		}
	});
 
	$('#toTop').click(function() {
		$('body,html').animate({scrollTop:0},800);
	});	
});
</script>
OBS: Se você já tem o arquivo jquery.js em alguma pasta de seu Fórum, então altere para o respectivo endereço na linha <script src="{T_THEME_PATH}/jquery.js"></script>, no código acima.
Se não o tiver, então, baixo o arquivo compactado abaixo, descompacte-o e faça upload do arquivo jquery.js para a pasta /theme de seu estilo em uso.
jquery.zip
:arrow: Funciona no Google Chrome 17.0, Firefox 10.2 e no IE8.

Fonte: ‘Back to top’ link using jQuery

Agora, para trocar o texto do botão por uma imagem ou ícone, no item 1, substitua o texto ^ Voltar ao Topo por:
<img src="./endereço da imagem ou ícone" style="width:00px; height:00px">.
Repare que width e height estão com 2 zeros, necessitando ser substituídos pela largura e altura da imagem ou ícone caso esta seja grande. Se a imagem ou ícone já estiver no tamanho certo, então, pode eliminar o texto style="width:00px; height:00px da linha.
Além disso, as configurações do botão devem ser alteradas para:

Código: Selecionar todos

#toTop {
    position: fixed;
    bottom: 5px;
    right: 5px;
    cursor: pointer;
} 
Abraço. Imagem

Re: Botão volta ao topo

Enviado: 03 Mar 2012, 23:29
por Night Angel
Não..
Aquele tópico foi aberto para tentar consertar o deslocamento da imagem do topo em resoluções diferentes de monitores.
Se vc notar bem..
Aquele pedido de suporte foi feito para um dos estilos que eu uso.
O
art_deluxe
Que atualmente não é o meu estilo padrão.
Mas..
Continua em funcionamento.

O menu deslizante que vc se refere.
É de um outro estilo.
O
ca_vintege_blue

EDITADO.

Bem...fiz todo o procedimento acima..
E o botão
NÃO está funcionando como deveria.
O botão realmente me leva ao topo..
Mas..
Ele está voltando direto..e não regredindo..como no exemplo mostrado


Meus arquivos editados ficaram assim:

ca_vintage-blue/theme/buttons.css

Código: Selecionar todos

#toTop {
       width:100px;
       padding:5px;
       position:fixed; /* this is the magic */
       bottom:10px; /* together with this to put the div at the bottom*/
       right:10px;
       cursor:pointer;
       display:none;
       
        
    }
ca_vintage_blue/template/overall_header.html

Código: Selecionar todos

	    <script src="{T_THEME_PATH}/js/jquery.js"></script>
    <script type="text/javascript">
    $(function() {
       $(window).scroll(function() {
          if($(this).scrollTop() != 0) {
             $('#toTop').fadeIn();   
          } else {
             $('#toTop').fadeOut();
          }
       });

       $('#toTop').click(function() {
          $('body,html').animate({scrollTop:0},800);
       });   
    });
    </script>
ca_vintage_blue/template/overall_footer.html

Código: Selecionar todos

<div id="toTop"><img src="http://www.rsrsrsrsrsrs.com/irtopo.png"></div> 
http://img196.imageshack.us/img196/7481/36858903.jpg

Re: Botão volta ao topo

Enviado: 04 Mar 2012, 20:42
por robra
O botão realmente me leva ao topo..
Mas..
Ele está voltando direto..e não regredindo..como no exemplo mostrado
1- Não entendi a diferença entre "voltando direto" e "não regredindo".
2- Cara... cadê o botão na página para poder visualizar o problema ?
Fui lá em seu Fórum e só fica uma "enfermeira" no canto inferior direito.
3- O arquivo jquery.js está em qual pasta em seu Fórum ? Você já o tinha ou baixou o eu que postei compactado ?

Abraço. Imagem