Problema com Scroll

Estou tentando fazer funcionar um jquery para que quando eu clique em algum link da minha página ela ao invés de pular direito para aquele elemento faça o scroll, já pesquisei um monte na internet porém nada funciona. Alguma boa alma pode me ajudar?

Código javascript:

function goTo(element, speed){
  var href = element.attr('href');
  var target = $(href).offset().target;
  $(document).animate({scrollTop : target}, speed);
}

$(function(){

  $('a[href^="#"]').click(function(e){
    e.preventDefault();
    goTo($(this), 1000);
  });
});

HTML:

 <ul class="opcoes nav navbar-nav navbar-right">
          <li><a href="index.html">Home</a></li>
          <li><a href="#escritorio">O Escritório</a></li>
          <li><a href="#atuacao">Areas de Atuação</a></li>
          <li><a href="#contato">Contato</a></li>
        </ul>
<div id="escritorio" class="container servicos">
    <div class="page-header">
      <h1>O Escritório</h1> 
    </div>
<p>...</p>
</div
<div id="atuacao" class="container servicos ">
   <div class="page-header">
     <h1>Areas de Atuação</h1>
   </div>
<p>...</p>
</div>