3

Estou usando o seguinte código:

<?php       
   foreach($sqlPortfolio2 as $dPortfolio2):
    echo '<li><a href="#guia'.$dPortfolio2['id'].'" class="scroll">'.$dPortfolio2['nome'.$lg].'</a></li>';
                endforeach;
                ?>


<script type="text/javascript">
jQuery(document).ready(function($) { 
    $(".scroll").click(function(event){        
        event.preventDefault();
        $('html,body').animate({scrollTop:$(this.hash).offset().top}, 800);
   });
});
</script>

O problema é que eu uso o menu fixo, ou seja, quando eu clico em um item do menu, o menu vem junto, e acaba ficando por cima do título do elemento que eu cliquei! Tem como fazer uma âncora extremamente precisa?

1
  • posta seu html para eu ver o que esta acontecendo 18/09/2015 às 10:50

1 Resposta 1

1

Você deve descontar a altura do menu ao realizar o scroll.

<script type="text/javascript">
jQuery(document).ready(function($) { 
    $(".scroll").click(function(event){        
        event.preventDefault();
        $('html,body').animate({scrollTop:$(this.hash).offset().top - $("#MENU").outerHeight(true) - 20}, 800);
   });
});
</script>

Descontamos 20 pixels para que o menu não fique "grudado" no elemento mais ao topo. Assim fica visualmente mais agradável.

7
  • Essa #MENU tem que estar configurado uma height no css dela?
    – user3081
    18/09/2015 às 12:13
  • @user3081 Não, esse #MENU é o Id do seu menu (troque pelo id do seu menu). Esse código vai pegar o height real do seu menu (altura dele) independente de você ter explicitado isso no CSS ou não. 18/09/2015 às 12:17
  • funcionou! Mas o menu fica colado ao título, tem como determinar uma altura, ao invés de ser automático?
    – user3081
    18/09/2015 às 12:29
  • @user3081 o que acontece é que foi descontada a exata altura do menu, por isso fica colado. Você pode descontar mais uns 20 pixels para que fique visualmente mais agradável. 18/09/2015 às 12:32
  • veja minha edição da resposta. 18/09/2015 às 12:32

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 .