javascript滚动帮助 - 标题落后于标题

Question

在下面的javascript代码中用于滚动页面。点击箭头，它会滚动。

但问题是，我有一个固定的标题，并且对于标题下面的正文内容我已经给出了margin-top：150px;。当页面滚动时，（标题）标题（页面上的h1＆＃39; s）将在上面的标题后面，在（标题）标题中应该在标题下面，这里有什么要用javascript做的吗？

HTML：

<a class="anchorClick" href="#slide1"><div class="arrow-down-light-blue"></div></a>

使用Javascript：

$(document).ready(function(){
   $(".anchorClick").click(function(){
      $('html, body').animate({
       scrollTop: $($(this).attr('href')).offset().top // UPDATED LINE
      }, 1000);
   });
});

使用JSFIDDLE更新：http://jsfiddle.net/zrdvv7co/3/