Scroll down to div + a certain margin

Question

I am using this script to scroll to a certain .div on my page:

$(".button").click(function() {
    $('html, body').animate({
        scrollTop: $(".scrolltothis").offset().top
    }, 500);
});

Works perfectly. This scrolls the page to the top of the "scrolltothis" div. Now here's the problem: I have a menu bar which has a fixed position at the top of the page. It's the kind of menu bar that stays on top of the page when scrolling down.

So when the script scrolls down to the "scrolltothis" div, a part of the div falls behind the menu bar.

What i need is a way to tell the browser to scroll down to "scrolltothis div" + down 50 pixels so that this div becomes completely visible under the menu bar.

Hope you guys can help me!

Answer 1

Just add 50 pixels to scrollTop while setting it.Try this:

$(".button").click(function() {
 $('html, body').animate({
    scrollTop: $(".scrolltothis").offset().top + 50;
 }, 500);
});