Botão volta ao topo

[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

[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.

[Bruno Dias]

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

:D

[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?

[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.

[Night Angel]

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.

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

[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.

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.

[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.

[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

[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.