Botão volta ao topo
-
- Membro Recente
- Mensagens: 262
- Registrado em: 26 Mai 2011, 22:54
- Localização: Planeta Terra
- Contact:
Botão volta ao topo
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
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
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.
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.
[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".
-
- Membro Intermediá¡rio
- Mensagens: 448
- Registrado em: 22 Set 2005, 19:11
- Localização: Araraquara - SP
- Contact:
Re: Botão volta ao topo
opa, aproveitei o topico e ja coloquei no meu forum tb
:D
: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
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
-
- Membro Recente
- Mensagens: 262
- Registrado em: 26 Mai 2011, 22:54
- Localização: Planeta Terra
- Contact:
Re: Botão volta ao topo
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?
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
Você marcou como "resolvido" mas não compartilhou a solução.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 ?
: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.
[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".
-
- Membro Recente
- Mensagens: 262
- Registrado em: 26 Mai 2011, 22:54
- Localização: Planeta Terra
- Contact:
Re: Botão volta ao topo
Mas então..robra escreveu:Você marcou como "resolvido" mas não compartilhou a solução.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 ?
: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.
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
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 ?Night Angel escreveu:Mas então..robra escreveu:Você marcou como "resolvido" mas não compartilhou a solução.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 ?
: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.
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
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.
[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".
Re: Botão volta ao topo
Bem... uma vez sendo o que você quer, então vou traduzir o conteúdo aqui:
1- Crie uma... e coloque-a no overall_footer.html de seu estilo em uso, antes da tag
2- As linhas abaixo configuram o estilo do botão: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 ... e inseri-las antes da tag
3- O código JQuery abaixo é para ser incluído antes da tagOBS: 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
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. :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
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
Além disso, as configurações do botão devem ser alteradas para:
Abraço.
1- Crie uma
<div>
, conforme mostrado abaixo...
Código: Selecionar todos
<div id="toTop">^ Voltar ao Topo</div>
</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;
}
<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>
</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>
<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. :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;
}
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".
-
- Membro Recente
- Mensagens: 262
- Registrado em: 26 Mai 2011, 22:54
- Localização: Planeta Terra
- Contact:
Re: Botão volta ao topo
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
ca_vintage_blue/template/overall_header.html
ca_vintage_blue/template/overall_footer.html
http://img196.imageshack.us/img196/7481/36858903.jpg
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;
}
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>
Código: Selecionar todos
<div id="toTop"><img src="http://www.rsrsrsrsrsrs.com/irtopo.png"></div>
Re: Botão volta ao topo
1- Não entendi a diferença entre "voltando direto" e "não regredindo".O botão realmente me leva ao topo..
Mas..
Ele está voltando direto..e não regredindo..como no exemplo mostrado
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.
[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".