Jquery Anchor extremely accurate!

Question

I’m using the following code:

<?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>

The problem is that I use the fixed menu, IE, when I click on a menu item, the menu comes together, and ends up staying over the title of the element I clicked! It has how to make an extremely precise anchor?

Answer 1

You should discount the height of the menu when performing the 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>

We discounted 20 pixels so that the menu is not "glued" to the top element. So it is visually more pleasant.