Scroll To negative or at the end of anchor

Question

The thing is, I have a problem with the Scroll To method. I have a menu that uses position:Fixed in css and when you click it it makes the anchor with the content until then normal if it wasn’t for a problem. The menu is 152px high and as I do not know so much java script so the menu does not stay on top of the content I used padding-top in each content, only that the client is not liking, so I come to you with the following question.

1 - It would be possible When I click on a link from the menu the javascript calculation decrease 152px so getting all of it on top of the content not having to padding?

2 - Or else it would be possible when I click on a link instead of going to its corresponding content it go to the end of the content above it?

Here is the website address for analysis http://bastidordigital.com.br/site/ and below the code used:

<script>
$(document).ready(function(){

    /** 
     * This part does the "fixed navigation after scroll" functionality
     * We use the jQuery function scroll() to recalculate our variables as the 
     * page is scrolled/
     */
    $(window).scroll(function(){
        var window_top = $(window).scrollTop() + 12; // the "12" should equal the margin-top value for nav.stick
        var div_top = $('#nav-anchor').offset().top;
            if (window_top > div_top) {
                $('header').addClass('stick');
            } else {
                $('header').removeClass('stick');
            }
    });


    /**
     * This part causes smooth scrolling using scrollto.js
     * We target all a tags inside the nav, and apply the scrollto.js to it.
     */
    $("header ul a").click(function(evn){
        evn.preventDefault();
        $('html,body').scrollTo(this.hash, this.hash); 
    });



    /**
     * This part handles the highlighting functionality.
     * We use the scroll functionality again, some array creation and 
     * manipulation, class adding and class removing, and conditional testing
     */
    var aChildren = $("header li").children(); // find the a children of the list items
    var aArray = []; // create the empty aArray
    for (var i=0; i < aChildren.length; i++) {    
        var aChild = aChildren[i];
        var ahref = $(aChild).attr('href');
        aArray.push(ahref);
    } // this for loop fills the aArray with attribute href values

    $(window).scroll(function(){
        var windowPos = $(window).scrollTop(); // get the offset of the window from the top of page
        var windowHeight = $(window).height(); // get the height of the window
        var docHeight = $(document).height();

        for (var i=0; i < aArray.length; i++) {
            var theID = aArray[i];
            var divPos = $(theID).offset().top; // get the offset of the div from the top of page
            var divHeight = $(theID).height(); // get the height of the div in question
            if (windowPos >= divPos && windowPos < (divPos + divHeight)) {
                $("a[href='" + theID + "']").addClass("header-active");
            } else {
                $("a[href='" + theID + "']").removeClass("header-active");
            }
        }

        if(windowPos + windowHeight == docHeight) {
            if (!$("header li:last-child a").hasClass("header-active")) {
                var navActiveCurrent = $(".header-active").attr("href");
                $("a[href='" + navActiveCurrent + "']").removeClass("header-active");
                $("header li:last-child a").addClass("header-active");
            }
        }
    });
});

</script>

Answer 1

You can subtract the height of the header to the animation of the scroll. EXAMPLE here, I only put customers in this case. This way you can take off the padding-top in each section you put in for that reason

$('header ul a').on('click', function(evn) {
  evn.preventDefault();
  $("html, body").animate({
    scrollTop: $($(this).attr('href')).offset().top - $('header').height() // vamos buscar o elemento cujo o id é a mesma href onde clicamos e dps vamos saber a altura a que está do topo e subtrair a altura do menu
  }, 500);
});

Here’s a example which you can adapt to your case as well, is more direct than how you’re doing