Solucionado (ver solução)
Solucionado
(ver solução)
5
respostas

Site One page (links de âncora)

Oi Galera!!

Não sei se é aqui que devo postar essa dúvida, caso não for me avisem eu posto no lugar correto rs.

Meu problema é o seguinte, tenho um site One Page de links âncoras, porém eu não consigo deixar os links no posicionamento correto da página, eu coloquei uns margin-top, mas sei que essa não é a solução correta. Eu gostaria que quando clicasse no link, fosse para a parte inicial do título da página. Alguém pode dar uma olhada pra mim, ver o que eu estou errando? Segue o link: http://www.pinbank.com.br/pinkubehomologacao/

muito obrigada!!

5 respostas

Olá Marylia,

Não entendi muito bem o problema, quando você clica em Merchant por exemplo, ele desce para a seção correta, porém o H2 fica atrás do menu, é esse o problema que você está tendo?

Se for isso, você está usando algum JS para fazer essa navegação correto? basta fazer um calculo da posição que você quer ir + a altura do menu.

Sim é esse mesmo o problema. Não estou usando nenhum JS, só a âncora mesmo, e pra direcionar o link, só estou usando âncora com Id mesmo, o problema é que estou forçando com margin para alinhar corretamente.

E agora preciso colocar mais uma âncora, o link de menu "About" direcionar para a baixo dos slides na seção: "Our mission is simple: " mas também não fica no lugar correto onde está o texto.

solução!

Olá Marylia,

Vi no seu código que tem um código JavaScript para realizar esse scroll:

<script>
    var $doc = $('html, body');
    $('a').click(function() {
        $doc.animate({
            scrollTop: $( $.attr(this, 'href') ).offset().top
        }, 500);
        return false;
    });
</script>

Então nesse caso você tem que diminuir o tamanho do menu para que ele mostre todo o conteúdo, fiz o teste aqui e funcionou

<script>
    var $doc = $('html, body');
    $('a').click(function() {
        $doc.animate({
            scrollTop: $( $.attr(this, 'href') ).offset().top - 100
        }, 500);
        return false;
    });
</script>

100 é a altura do menu, então você tem que desconsidera-la para mostrar corretamente o conteúdo.

Espero ter ajudado!

Aeeeee!! nossa muito obrigada Luiz Fernando! Vc me salvou!! =D era isso mesmo!!

Hehe

De nada, lembrando que os 100 estão fixos, seria interessante para deixar dinâmico você pegar a altura correta do menu para que caso ela venha a mudar, não precise mais alterar o código, ele irá se comportar automaticamente o/

Precisando só falar, que o pessoal daqui sempre responde!

Até mais!