How do I stop scrolling immediately after header?

Question

I have this site:

link

CODE HTML:

 <div class="col-md-12 text-center img-scroll">
            <img src="wp-content/uploads/2015/10/scroll.png" >
        </div>

CODE JS:

$(window).scroll(function() {
    var scroll = $(window).scrollTop();
    console.log("scroll-ul este:",scroll);
    $(".img-scroll img").click(function() {
        debugger;
        var scroll = $(window).scrollTop();
        var const_header=$(".about-content-top").outerHeight();
        var result=const_header-scroll;
        if(scroll<const_header){
            $('html, body').animate({
                scrollTop: $(window).scrollTop() + result
            });
        }else{
            console.log("mata");
        }
        console.log("headerul este:",const_header);
    });
});

What I want to do is when a user clicks on the image, scrolling to go just under the header

I put a picture to see more clearly what they want to do

can you tell me please why my position is not good with my function? Do not do what I need ...

Thanks in advance!