Jquery anchor extremely accurate!

Navigation
3

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, that is, when I click on a menu item, the menu comes together, and ends up getting over the title of the element that I clicked on! Can you make an extremely precise anchor?

    
asked by anonymous 18.09.2015 / 11:58

1 answer

1

You should discount the height of the menu by scrolling. 

<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 discount 20 pixels so that the menu does not stick to the topmost element. This makes it visually more enjoyable.

    
18.09.2015 / 12:59
Problem compiling: no input files compilation terminated Await ignored in asynchronous method c #