Desplácese hacia abajo hasta div + un cierto margen

Estoy usando este script para desplazarme a un determinado archivo .div en mi página:

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

Funciona perfectamente. Esto desplaza la página a la parte superior de la div “scrolltothis”. Ahora, aquí está el problema: tengo una barra de menú que tiene una posición fija en la parte superior de la página. Es el tipo de barra de menús que permanece en la parte superior de la página cuando se desplaza hacia abajo.

Así que cuando el script se desplaza hacia abajo hasta el div “scrolltothis”, una parte del div cae detrás de la barra de menú.

Lo que necesito es una forma de indicar al navegador que se desplace hacia abajo a “scrolltothis div” + 50 píxeles hacia abajo para que este div sea completamente visible debajo de la barra de menú.

¡Espero que ustedes puedan ayudarme!

Solo agregue 50 píxeles a scrollTop mientras lo configura. Pruebe esto:

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