scroll animation in page

Some browsers render the viewport's default scroll bar in the body element (Chrome, Safari), others in the html element (Firefox, IE). Animating the scrollTop property on an element which has no scroll bar has no effect, as you may have noticed.

HTML

<div class="menu-fundo">
<div class="menu">

<div class="logo">

<img src="images/logo.png" />

</div>

        <ul id="menutop">
              <li><a href="#contato">CONTACT</a></li>
              <li><a href="#equipe">EQUIPE</a></li>
              <li><a href="#quem">QUEM SOMOS</a></li>
              <li><a href="#como">COMO FAZEMOS</a></li>
              <li><a href="#que">O QUE FAZEMOS</a></li>
        </ul>
    </div>
    </div>

<div id="slider" class="nivoSlider theme-default">
    <img src="images/slide1.png"/>
    <img src="images/slide2.png"/>
    <img src="images/slide3.png"/>
</div>

<div class="row">

<div class="o-que-fazemos">
  <a id="que"></a>
  <h1 class="o-que-fazemos-title">O QUE FAZEMOS?</h1>
 <h1 class="o-que-fazemos-subtitle">COMUNICAÇÃO + DESIGN</h1>


<div class="o-que-fazemos-content-1">

 <br />
<br />

<b>SUA MARCA VAI ALÉM.</b><br /><br />

<b><i>Consolidar uma marca vai além.</i></b><br /><br />

Além de um simples nome, razão ou definição, consolidar uma marca depende de uma experiência. E é a partir disto que as ideias surgem. Um novo conceito e uma nova definição de negócio.<br />
A <b>BASK.RA</b> nasceu para pensar, criar e gerenciar o posicionamento da sua empresa no mercado.

</div>


<div class="o-que-fazemos-content-2">

<img src="images/oqfazemos.png" />

</div>

</div>
</div>

<div class="row">
<div class="como-fazemos">
  <a id="como"></a>

  <h1 class="como-fazemos-title">COMO FAZEMOS?</h1>

  <div class="como-fazemos-content-1">
  <img src="images/comofazemos-content1.png" />
  </div>

  <div class="como-fazemos-content-2">
  <img src="images/comofazemos-content2.png" />
  </div>

  <div class="como-fazemos-content-3"> 
  <img src="images/comofazemos-content3.png" />
  </div>

  <div class="como-fazemos-content-4"> 
  <img src="images/comofazemos-content4.png" />
  </div>

  <div class="como-fazemos-content-5"> 
  <img src="images/comofazemos-content5.png" />
  </div>

</div>
</div>

<div class="row">
<div...

CSS

@charset "utf-8";
/* CSS Document */


html,body {
    height:100%;    
    margin:0;
    padding:0;
    border:0;
    }

div {
    margin:0;
    border:0;
    }

.login {
  display: table-cell;
}

logo {  
    border:0;
    z-index:9999;
    float:left;
    }

    hr {
   display: block;
   position: relative;
   padding: 0;
   margin: 20px auto;
   height: 0;
   width: 50%;
   max-height: 0;
   font-size: 1px;
   line-height: 0;
   clear: both;
   border: none;
   border-top: 2px solid #FFF;
   border-bottom: 1px solid #FFF;
}

.menu-fundo {
    background: #fff repeat-x 0 0;
    left: 0;
    top: 0;
    z-index: 9999;
    position:fixed;
    }

.f-menu {
    z-index: 9999;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    } /* isso vai fazer o menu ficar fixo no topo */

.menu {
height: 100px;
left: 0;
top: 0;
z-index: 9999;
background: #fff repeat-x 0 0;
position:fixed; width:100%
}

.menu ul {
    list-style: none;
    font-family: 'Source Sans Pro', sans-serif;
    font-size:17px;
    font-weight:bold;
    position: fixed;
    top: 0;
    right: 0;
    display: table-cell;
    vertical-align: middle;
    width: 100%;
    }

.menu ul li {
float: right;
padding-right:30px;
padding-top:0px;
}

.menu ul li:first-child {
    padding-left: 0;
    }

.menu ul li a {
    color:#000;
    text-decoration:none;
    border-top:3px solid #999;
    }

.menu ul li a:hover {
    color: #6D6D6D;
    border-top:3px solid #EA0000;
    }


.row, .o-que-fazemos, .como-fazemos, .quem-somos, .a-equipe, .o-contato {
    display: block;
    float: left;
    position: relative;
    overflow: hidden;
    width: 100%;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
}

.o-que-fazemos {
    background-image: url('images/oqfazemosFUNDO.png');
    font-family: 'Source Sans Pro', sans-serif;
    background-repeat: repeat-x repeat-y;
    height:auto;
    font-size:28px;
    padding: 50px;
    float:left;
    overflow: hidden;
    }

.o-que-fazemos-title {
   ...

JavaScript

$("#menutop a").click(function(){
var menuid = $(this).attr("href");
$("body, html").animate({scrollTop: $(menuid).offset().top - $('.menu').height() }, "slow");
return false;
});