Marcar local na página com link

Detalhes da dúvida

Versão do fórum : PunBB
Nível de acesso : Administrador
Navegador usado : Mozilla Firefox, Google Chrome
Membros afetados : Todos os membros do fórum
Endereço do fórum : http://staffergroupbr.stuning.net/forum

Descrição do problema

Olá, não sei como esse efeito é chamado, mas tem no Wikipedia, existem vários links no topo do tópico, quando você clica em algum deles, a página rola até uma parte correspondente.

Veja na imagem que eu cliquei no link da "oitava temporada": https://i.servimg.com/u/f19/17/71/75/73/110.png

Veja nesta outra imagem que a página rolou automaticamente até a parte correspondente: https://i.servimg.com/u/f19/17/71/75/73/210.png

Saudações!

Crie um novo JS com investimento nos tópicos com o seguinte código:

Código:

$('html, body').animate({
scrollTop: $("#vemaqui").offset().top
}, 2000);

Caminho: CPainel >> Módulos >> HTML & JAVASCRIPT > Gestão dos códigos JavaScript >>> Criar um novo JavaScript

E utilize este HTML num tópico:

Código:

<input type="button" onclick="$('html,body').animate({scrollTop: $('#vemaqui').offset().top}, 2000);" value="Veja Funcionando" ><br>

Faça o teste, eu fiz e resultou!

Tópico movido de "Outras questões" para "Questões sobre JavaScript & JQuery"

Até!

Isso é simples de se fazer meu amigo, apenas use ID:

Link que será clicado:

Código:


<a href="#secao">ID</a>


Conteúdo a aparecer ao ser clicado:

Código:


<section id="secao">
Olá! Eu sou o conteúdo!
</section>


OBS: Se a página for pequena, com apenas 1 link e 1 seção, o efeito não será visível.

Boa tarde.

Apesar da questão já ter sido marcada como resolvida, adote a prática do uso dos IDs padrão se for em caso de mensagens. Quer um exemplo? Veja a nossa lista de tutoriais: https://ajuda.forumeiros.com/t6745- Se clicar numa imagem específica verás que a página leva-o até a categoria específica da URL, então, podes adotar algo mais "nativo" também.

Questão marcada como Resolvida ou o Autor solicitou que ela fosse arquivada. Tópico marcado como Resolvido e movido para Questões resolvidas.

Atenciosamente,
Shek