Botão volta ao topo

Suporte aos MODs/Hacks para phpBB.
Night Angel
Membro Recente
Membro Recente
Mensagens: 262
Registrado em: 26 Mai 2011, 22:54
Localização: Planeta Terra
Contact:

Botão volta ao topo

Mensagem 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
Imagem
Avatar do usuário
robra
Membro Sênior
Membro Sênior
Mensagens: 6065
Registrado em: 02 Dez 2010, 22:29

Re: Botão volta ao topo

Mensagem 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
[DICA] Antes de abrir um Novo Tópico, procure saber se a sua dúvida já foi respondida. Pesquise no Google por palavras(em inglês também) relacionadas à ela, somado à palavra "phpbb".
Bruno Dias
Membro Intermediá¡rio
Membro Intermediá¡rio
Mensagens: 448
Registrado em: 22 Set 2005, 19:11
Localização: Araraquara - SP
Contact:

Re: Botão volta ao topo

Mensagem por Bruno Dias »

opa, aproveitei o topico e ja coloquei no meu forum tb

:D
Forum: Novo Gol Clube
Style: Baseado no Prosilver SE e personalizado por mim, totalmente integrado ao site junto com WP-phpBB Bidge
Mods:
Advanced Quick Reply
Who Was Here
Precise Similar Topics II
Topic Statistics
AOS Who Visited a Topic
Night Angel
Membro Recente
Membro Recente
Mensagens: 262
Registrado em: 26 Mai 2011, 22:54
Localização: Planeta Terra
Contact:

Re: Botão volta ao topo

Mensagem 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?
Imagem
Avatar do usuário
robra
Membro Sênior
Membro Sênior
Mensagens: 6065
Registrado em: 02 Dez 2010, 22:29

Re: Botão volta ao topo

Mensagem 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
[DICA] Antes de abrir um Novo Tópico, procure saber se a sua dúvida já foi respondida. Pesquise no Google por palavras(em inglês também) relacionadas à ela, somado à palavra "phpbb".
Night Angel
Membro Recente
Membro Recente
Mensagens: 262
Registrado em: 26 Mai 2011, 22:54
Localização: Planeta Terra
Contact:

Re: Botão volta ao topo

Mensagem 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
Imagem
Avatar do usuário
robra
Membro Sênior
Membro Sênior
Mensagens: 6065
Registrado em: 02 Dez 2010, 22:29

Re: Botão volta ao topo

Mensagem 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
[DICA] Antes de abrir um Novo Tópico, procure saber se a sua dúvida já foi respondida. Pesquise no Google por palavras(em inglês também) relacionadas à ela, somado à palavra "phpbb".
Avatar do usuário
robra
Membro Sênior
Membro Sênior
Mensagens: 6065
Registrado em: 02 Dez 2010, 22:29

Re: Botão volta ao topo

Mensagem 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
Você não está autorizado a ver ou baixar esse anexo.
[DICA] Antes de abrir um Novo Tópico, procure saber se a sua dúvida já foi respondida. Pesquise no Google por palavras(em inglês também) relacionadas à ela, somado à palavra "phpbb".
Night Angel
Membro Recente
Membro Recente
Mensagens: 262
Registrado em: 26 Mai 2011, 22:54
Localização: Planeta Terra
Contact:

Re: Botão volta ao topo

Mensagem 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
Imagem
Avatar do usuário
robra
Membro Sênior
Membro Sênior
Mensagens: 6065
Registrado em: 02 Dez 2010, 22:29

Re: Botão volta ao topo

Mensagem 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
[DICA] Antes de abrir um Novo Tópico, procure saber se a sua dúvida já foi respondida. Pesquise no Google por palavras(em inglês também) relacionadas à ela, somado à palavra "phpbb".
Trancado