0

Preciso editar a ancora do conteudo para uma altura menor do que a do conteudo.

Estou utilizando o js

 $(".white-felling").click(function(){
                    $("html,body").animate({scrollTop:$("#white-felling").offset().top},"500");
                    return true
                })

e ao clicar, sou direcionado ao conteudo:

 <section class="text medium-12 medium-centered columns" id="white-felling">
bla bla bla
</div>

Mas tenho um problema, pois utilizo um header com altura fixa, assim, ao utilizar a ancora o conteudo fica oculto.

Como fica: como fica

Como deveria ficar: como deveria ficar

jsfindle: http://jsfiddle.net/thallysondias/n4r2ao8n/ Existe alguma forma de manter a função de ancora (com o link a exibir xxx.com#section) e mesmo assim editar a altura para menos pixeis?

2

1 Resposta 1

1

Sim, você precisa fazer 2 coisas:

  1. Mensurar a altura do header
  2. Descontar o valor da altura do header no valor inteiro passado para scrollTop

Para o (1), você pode usar o Crome Dev Tools para o Google Chrome o Firebug para o Firefox ou o Internet Explorer Developer Tools, se usa o IE.

Abaixo segue um exemplo de como fazer isso no Chrome:

  • Pressione F12
  • Clique na lupa, como na imagem abaixo:

Chrome Dev Tools

  • Mova a imagem até a área do elemento a ser mensurado (no seu caso, o header)
  • Anote o valor de altura (no caso da imagem acima, 208px)

Fazendo o (2), seu código ficaria mais ou menos assim:

$(".white-felling").click(function(){
    $("html,body").animate({
        scrollTop: $("#white-felling").offset().top - <valor_altura_do_header>
    },"500");
    return true
    })

Onde <valor_altura_do_header> é o valor mensurado usando o Dev Tools, no caso da imagem acima, seria 208.

1
  • André, obrigado. Eu tinha tentado fazer, estava colocando: .top(-300)/ .top(-300px)/.top(top:-300) e sempre dava erro. O correto era tirar as aspas. Muito obrigado. 25/11/2014 às 16:39

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .