title: css tabs don't scroll in page's top
body: <p>I've got this issue that i can't resolve myself.</p>
  
  <p>I've got css tabs like in this site: <a href="http://www.sitepoint.com/css3-tabs-using-target-selector/" rel="nofollow noreferrer">http://www.sitepoint.com/css3-tabs-using-target-selector/</a>
  but i've got a fixed menu in the top of the page. So, when i click in one tab, the html navigate to the anchor that is under this menu and the content jump to top.
  I want to scroll the content on top of the page, I've searched a lot, tried `$('body').scrollTop(0); what they said in this answer: <a href="https://stackoverflow.com/questions/1144805/how-do-i-scroll-to-the-top-of-the-page-with-jquery">Scroll to the top of the page using JavaScript/jQuery?</a>
  but nothing work. This is my code, HTML:</p>
  
  <pre><code>&lt;body class="centered"&gt;
          &lt;div id="main-container"&gt;
              &lt;!-- header --&gt;
              &lt;div class="col_1_of_1 blue header"&gt;
                   &lt;div class="col_1_of_5 menu-icon"&gt;
                      &lt;img src="img/menu.png"&gt;
                  &lt;/div&gt;
                  &lt;div class="col_3_of_5"&gt;
                      &lt;p class="main_title" id="headerTitle"&gt;&lt;/p&gt;
                  &lt;/div&gt;
                 &lt;div class="col_1_of_5 img-icon"&gt;
                      &lt;img src="*"&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;!-- body --&gt;
              &lt;div class="body" id="list"&gt;
                  &lt;article class='tabs'&gt;
                  &lt;section id='tab1'&gt;
                      &lt;h2&gt;&lt;a href='#tab1' id='sayit'&gt;Person1&lt;/a&gt;&lt;/h2&gt;
                        &lt;div class='col_1_of_1'&gt;
                              &lt;img src='img/bike/img.png'&gt;
                      &lt;/div&gt;
                      &lt;div class='col_1_of_1'&gt;
                          &lt;p class='fausto_title'&gt;dscdsvdvds&lt;/p&gt;
                          &lt;p class='fausto_text'&gt;vdlisvd shvgldk sgvds gvgsd kjbvds  ds uidshiu diui guig uig uig g g gl ffyolg f f h hj lhfh ff yfyufolyf uhyf &lt;p&gt;
                      &lt;/div&gt;
                   &lt;/section&gt;
                   &lt;section id='tab2'&gt;
                      &lt;h2&gt;&lt;a href='#tab2'&gt;John&lt;/a&gt;&lt;/h2&gt;
                        &lt;div class='col_1_of_1'&gt;
                              &lt;img src='img/moto/img2.png'&gt;
                      &lt;/div&gt;
                      &lt;div class='col_1_of_1'&gt;
                          &lt;p class='fausto_title'&gt;dcdsdvdvds &lt;/p&gt;
                          &lt;p class='fausto_text'&gt;dsvdvdhvihiu ugig piogv hgho ghvh vhvhv hvo vohv hovhjvhjvhvh vhvvhv vhvh vhvhv hv hjvp8ythtuy ty tygt gtg68g 6g 6g 6g tg tr gytrg &lt;p&gt;
                      &lt;/div&gt;
                   &lt;/section&gt;
              &lt;/article&gt;
               &lt;/div&gt; &lt;!-- end body --&gt;
          &lt;/div&gt;
  </code></pre>
  
  <p>CSS:
  tabs.css</p>
  
  <pre><code>/* --- container's width --- */
  article.tabs
  {
      position: relative;
      display: block;
      width: 100%;
  }
  article.tabs section
  {
      position: absolute;
      top: 1.8em;
      left: 0;
      height: 12em;
      background-color: #ddd;
      z-index: 0;
      width: 100%;
  }
  article.tabs section .table  {
      display: none;
  }
  
  article.tabs section:first-child
  {
      z-index: 1;
  }
  article.tabs section h2
  {
      position: absolute;
      font-size: 1em;
      font-weight: normal;
      width: 33%;
      height: 1.8em;
      top: -1.8em;
      padding: 0;
      margin: 0;
      color: #999;
      background-color: #ddd;
      border-top: 1px solid #ddd;
  }
  
  article.tabs section:nth-child(2) h2
  {
      left: 33%;
  }
  
  article.tabs section:nth-child(3) h2
  {
      left: 66%;
  }
  
  article.tabs section h2 a
  {
      display: block;
      width: 100%;
      line-height: 1.8em;
      text-align: center;
      text-decoration: none;
      color: inherit;
      outline: 0 none;
  }
  /* --- active section --- */
  article.tabs section:target,
  article.tabs section:target h2
  {
      background-color: #fff;
      z-index: 2;
  }
  article.tabs section:target {
      width: 100%;
      position: absolute;
  
      top: 1.8em;
      left: 0;
      height: 12em;
  
  }
  article.tabs section:target h2 {
      width: 33%;
      border-right: 1px solid rgb(27,47,105);
      border-left: 1px solid rgb(27,47,105);
      border-top: 1px solid rgb(27,47,105);
      color: rgb(27,47,105);
  }
  article.tabs section:target .table{
      display: block;
  }
  /* --- transition effect --- */
  
  article.tabs section,
  article.tabs section h2
  {
      -webkit-transition: all 500ms ease;
      -moz-transition: all 500ms ease;
      -ms-transition: all 500ms ease;
      -o-transition: all 500ms ease;
      transition: all 500ms ease;
  }
  </code></pre>
  
  <p>menu.css:</p>
  
  <pre><code>.menu-icon {
      padding-top: 9% !important;
  }
  .menu-icon img {
      width: 40%;
  }
  .header {
      position: fixed;
      height: 64px; 
      top: 0;
      z-index: 1000;
  }
  .header div {
      float: left;
      padding-top: 8%;
  }
  </code></pre>
  
  <p>Thanks in advice for any help!</p>
  
  <p>EDIT:</p>
  
  <p>This is a phonegap application and i'm compling in iOS just now. It seems like the command scrollTop isn't recognize.
  I'm using zepto.js, a jQuery like library but much faster.</p>
  
  <p>EDIT 2:
  Zepto.js / jQuery:</p>
  
  <pre><code>function clickButton()
  {
      document.getElementById('sayit').click();
      return true;
  }
  
  $(function() {
  
          //..other code (nothing to do with tabs)
  
          //simulate the first click on a tab
          clickButton();
  
          $('a').on('click', function(event){
            var anchor = $(this);
            alert($(anchor.attr('href')).offset().top);
            $('html, body').stop().animate({
                scrollTop: $(anchor.attr('href')).offset().top
            }, 100);       
            event.preventDefault();
          });
  });
  </code></pre>