scrolltop stop 50px above target position

Question

How can I modify my script so that it stops 50px above my target DIV. This is because I have a fixed nav bar on top of the screen that is 50px wide and would like it to be taken into account.

$(document).ready(function(){
$("a").on('click', function(event) {
    if (this.hash !== "") {
        event.preventDefault();
    var hash = this.hash;
    $('html, body').animate({
        scrollTop: $(hash).offset().top
    }, 800, function(){
        window.location.hash = hash;
    });
    } 
});
});

Answer 1

try this this what worked In my case

scrollTop: $(hash).offset().top - 50;

where 50 is height of you header. Instead You can also use

scrollTop: $(hash).offset().top - $(navbarSelector).height();