Anchor Link Edge or Positioning

Question

I have an anchor link that takes a button at the top to a certain part of the page, but as my menu accompanies the page, it ends up being cut as in the image below:

How would I give a space? Margin or position, I don’t know, but I need the link to go down so it looks like this:

I’m using a script to smooth the scrolling:

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

Answer 1

If you want to achieve the same result using CSS only, just add the following to your style.css or custom.css

:target:before {
content:"";
display:block;
height:90px; /* fixed header height*/
margin:-90px 0 0; /* negative fixed header height */
}

Where the 90px is the spacing you want

Answer 2

Put a - 20 after . top.

scrollTop:$(this.hash).offset().top - 20 

So it positions -20 pixels of your element.