internal linking offset.top not working ALWAYS. why
<p>i have in my webpage internal links.</p>

<p>to activate them i did this:</p>

<pre><code>$('#moveSkills').bind('click',function(event){
    var $anchor = $(this);

    $('html, body').stop().animate({
        scrollTop: $($anchor.attr('href')).offset().top
    }, 300,'easeInOutExpo');


    event.preventDefault();
   });
</code></pre>

<p>this is what it does: when the #moveskills is clicked, the href of the id is detected and goes to the selected link.</p>

<p>it works! but not always.</p>

<p>Actually, it works fine SOMETIMES.</p>

<p>my question is WHY? it looks like that the browser is unable to calculate ALWAYS the offset.top of given position.</p>

<p>sometime it is slightly not perfectly alined.</p>

<p>thanks</p>

<p>additional info:</p>

<p>here is the html text for the menu : </p>

<pre><code>             &lt;div id="container1"&gt;



  &lt;ul id="menu"&gt;


    &lt;li id="first"&gt;&lt;a href="#" id="liServizi"&gt;Servizi&lt;/a&gt;

      &lt;ul class="active" id="uno"&gt;

                &lt;li&gt;&lt;a href="#realizzazione" id="moveRealizzazione"&gt;Realizzazione siti web&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="#traduzione" id="moveTraduzione"&gt;Traduzione spazi web&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="#ritocco" id="moveFotoritocco"&gt;Fotoritocco professionale&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="#tel" id="moveIphone"&gt;I-Phone e dispositivi mobili&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="#ass" id="moveAssistenza"&gt;Assistenza e manutenzione&lt;/a&gt;&lt;/li&gt;
                &lt;li id="roundBottom"&gt;&lt;a href="#face" id="moveFBMarketing"&gt;Facebook Marketing&lt;/a&gt;&lt;/li&gt;


            &lt;/ul&gt;


        &lt;/li&gt;


        &lt;li&gt;&lt;a href="#" id="liPortfolio" &gt;Portfolio-Lavori&lt;/a&gt;
            &lt;ul id="due" &gt;
               &lt;li&gt;&lt;a href="#sitacci" id="moveSiti"&gt;Siti web&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="#faceb" id="movePagineFB"&gt;Pagine Facebook&lt;/a&gt;&lt;/li&gt;
                &lt;li id="roundBottom" &gt;&lt;a href="#photoshoppando" id="moveFotoritocchi"&gt;Fotoritocchi&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
        &lt;/li&gt;
        &lt;li&gt;&lt;a href="#" id="liChisiamo" &gt;Chi siamo&lt;/a&gt;
            &lt;ul id="tre" &gt;

            &lt;li&gt;&lt;a href="#cs1" id="moveIntro"&gt;Introduzione&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#cs2" id="movePerche"&gt;Perché scegliere noi?&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#cs3" id="moveMetodo"&gt;Il nostro metodo di lavoro&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#cs4" id="moveFormazione"&gt;Formazione&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#cs5" id="moveSkills"&gt;Competenze e skills&lt;/a&gt;&lt;/li&gt;
            &lt;li id="roundBottom" &gt;&lt;a href="#cs6" id="moveCv"&gt;Scarica CV completo&lt;/a&gt;&lt;/li&gt;

            &lt;/ul&gt;
        &lt;/li&gt;

        &lt;li id="last" &gt;&lt;a href="#" id="liContatti"&gt;Contatti&lt;/a&gt;
            &lt;ul id="quattro" &gt;

               &lt;li id="roundBottom" &gt;&lt;a href="#titolo_contatti" id="moveContatti4"&gt;Modulo di contatto&lt;/a&gt;&lt;/li&gt;

            &lt;/ul&gt;
        &lt;/li&gt;



    &lt;/ul&gt;




&lt;/div&gt;
</code></pre>

<p>this is the js page for all the internal links</p>

<pre><code>// jQuery page for #internal links
</code></pre>

<p>$(document).ready(function() {</p>

<pre><code>          // LINK CHI SIAMO formazione //

   $('#moveFormazione').bind('click',function(event){
    var $anchor = $(this);

    $('html, body').stop().animate({
        scrollTop: $($anchor.attr('href')).offset().top
    }, 300,'easeInOutExpo');


    event.preventDefault();

   $('#cs4')
 .next().slideDown()

 $('#cs4')
 .css('background-position', 'right -20px')

   $('.cs44').animate({'backgroundColor':'#fed078'}, 3000);

   setTimeout(function() {

   $('.cs44').animate({'backgroundColor':'#ffffff'}, 3000);


   }, 2000);
</code></pre>

<p>});</p>

<pre><code>          // LINK CHI SIAMO competenze //

   $('#moveSkills').bind('click',function(event){
    var $anchor = $(this);

    $('html, body').stop().animate({
        scrollTop: $($anchor.attr('href')).offset().top
    }, 300,'easeInOutExpo');


    event.preventDefault();

    $('#cs5')
 .next().slideDown()

 $('#cs5')
 .css('background-position', 'right -20px')

       $('.cs55').animate({'backgroundColor':'#fed078'}, 3000);

   setTimeout(function() {

   $('.cs55').animate({'backgroundColor':'#ffffff'}, 3000);


   }, 2000);
</code></pre>

<p>});</p>

<pre><code>          // LINK CHI SIAMO cv //

   $('#moveCv').bind('click',function(event){
    var $anchor = $(this);

    $('html, body').stop().animate({
        scrollTop: $($anchor.attr('href')).offset().top
    }, 300,'easeInOutExpo');


    event.preventDefault();

    $('#cs6')
 .next().slideDown()

 $('#cs6')
 .css('background-position', 'right -20px')

       $('.cs66').animate({'backgroundColor':'#fed078'}, 3000);

   setTimeout(function() {

   $('.cs66').animate({'backgroundColor':'#ffffff'}, 3000);


   }, 2000);
</code></pre>

<p>});</p>

<p>// LINK VAI A MODULO DI CONTATTO //</p>

<p>$('#moveContatti4').bind('click',function(event){
        var $anchor = $(this);</p>

<pre><code>    $('html, body').stop().animate({
        scrollTop: $($anchor.attr('href')).offset().top
    }, 500,'easeInOutExpo');


    event.preventDefault();
</code></pre>

<p>$('#titolo_contatti')
     .next().slideDown()</p>

<pre><code> $('#titolo_contatti')
 .css('background-position', 'right -20px')


           $('#intro_contatti, #intro_map').animate({'backgroundColor':'#fed078'}, 3000);

   setTimeout(function() {

   $('#intro_contatti, #intro_map').animate({'backgroundColor':'#ffffff'}, 3000);


   }, 2000);



});




// LINK ASSISTENZA E MANUTENZIONE //

$('#moveAssistenza').bind('click',function(event){
    var $anchor = $(this);

    $('html, body').stop().animate({
        scrollTop: $($anchor.attr('href')).offset().top
    }, 300,'easeInOutExpo');


    event.preventDefault();
</code></pre>

<p>$('#ass')
     .next().slideDown()</p>

<pre><code> $('#ass')
 .css('background-position', 'right -20px')





});



    // LINK VAI A MODULO DI CONTATTO //


        $('#moveContatti').bind('click',function(event){
    var $anchor = $(this);

    $('html, body').stop().animate({
        scrollTop: $($anchor.attr('href')).offset().top
    }, 300,'easeInOutExpo');


    event.preventDefault();
</code></pre>

<p>$('#titolo_contatti')
     .next().slideDown()</p>

<pre><code> $('#titolo_contatti')
 .css('background-position', 'right -20px')


});










// LINK VAI A MODULO DI CONTATTO //

            $('#moveContatti2').bind('click',function(event){
    var $anchor = $(this);

    $('html, body').stop().animate({
        scrollTop: $($anchor.attr('href')).offset().top
    }, 300,'easeInOutExpo');


    event.preventDefault();
</code></pre>

<p>$('#titolo_contatti')
     .next().slideDown()</p>

<pre><code> $('#titolo_contatti')
 .css('background-position', 'right -20px')


});











// LINK VAI A Portfolio PSD //

        $('#movePSD').bind('click',function(event){
    var $anchor = $(this);

    $('html, body').stop().animate({
        scrollTop: $($anchor.attr('href')).offset().top
    }, 300,'easeInOutExpo');


    event.preventDefault();
</code></pre>

<p>$('#photoshoppando, #space_up_3, #photoshop_gallery')
     .next().slideDown()</p>

<pre><code> $('#photoshoppando')
 .css('background-position', 'right -20px')


});
</code></pre>

<p>// LINK VAI A Portfolio FB //</p>

<pre><code>$('#moveFB').bind('click',function(event){
    var $anchor = $(this);

    $('html, body').stop().animate({
        scrollTop: $($anchor.attr('href')).offset().top
    }, 300,'easeInOutExpo');


    event.preventDefault();
</code></pre>

<p>$('#faceb, #space_up_2, #facebook_gallery')
     .next().slideDown()</p>

<pre><code> $('#faceb')
 .css('background-position', 'right -20px')
</code></pre>

<p>});</p>

<pre><code>  // LINK VAI A CONSULENZA //

   $('#moveConsulenza').bind('click',function(event){
    var $anchor = $(this);

    $('html, body').stop().animate({
        scrollTop: $($anchor.attr('href')).offset().top
    }, 300,'easeInOutExpo');


    event.preventDefault();
</code></pre>

<p>});</p>

<pre><code>      // LINK CHI SIAMO INTRODUZIONE //

   $('#moveIntro').bind('click',function(event){
    var $anchor = $(this);

    $('html, body').stop().animate({
        scrollTop: $($anchor.attr('href')).offset().top
    }, 300,'easeInOutExpo');


    event.preventDefault();

   $('#cs1')
 .next().slideDown()

 $('#cs1')
 .css('background-position', 'right -20px')

       $('#contenuto_chi_siamo').animate({'backgroundColor':'#fed078'}, 3000);

   setTimeout(function() {

   $('#contenuto_chi_siamo').animate({'backgroundColor':'#ffffff'}, 3000);


   }, 2000);
</code></pre>

<p>});</p>

<pre><code>      // LINK CHI SIAMO perche scegliere noi //

   $('#movePerche').bind('click',function(event){
    var $anchor = $(this);

    $('html, body').stop().animate({
        scrollTop: $($anchor.attr('href')).offset().top
    }, 300,'easeInOutExpo');


    event.preventDefault();

   $('#cs2')
 .next().slideDown()

 $('#cs2')
 .css('background-position', 'right -20px')

       $('.cs22').animate({'backgroundColor':'#fed078'}, 3000);

   setTimeout(function() {

   $('.cs22').animate({'backgroundColor':'#ffffff'}, 3000);


   }, 2000);
</code></pre>

<p>});</p>

<pre><code>          // LINK CHI SIAMO metodo di lavoro //

   $('#moveMetodo').bind('click',function(event){
    var $anchor = $(this);

    $('html, body').stop().animate({
        scrollTop: $($anchor.attr('href')).offset().top
    }, 300,'easeInOutExpo');


    event.preventDefault();

    $('#cs3')
 .next().slideDown()

 $('#cs3')
 .css('background-position', 'right -20px')

       $('.cs33').animate({'backgroundColor':'#fed078'}, 3000);

   setTimeout(function() {

   $('.cs33').animate({'backgroundColor':'#ffffff'}, 3000);


   }, 2000);
</code></pre>

<p>});</p>

<pre><code>          // LINK PORTFOLIO FOTORITOCCHI //

   $('#moveFotoritocchi').bind('click',function(event){
    var $anchor = $(this);

    $('html, body').stop().animate({
        scrollTop: $($anchor.attr('href')).offset().top
    }, 300,'easeInOutExpo');


    event.preventDefault();
</code></pre>

<p>$('#photoshoppando, #space_up_3, #photoshop_gallery')
     .next().slideDown()</p>

<pre><code> $('#photoshoppando')
 .css('background-position', 'right -20px')
</code></pre>

<p>});</p>

<pre><code>              // LINK PORTFOLIO FB //

   $('#movePagineFB').bind('click',function(event){
    var $anchor = $(this);

    $('html, body').stop().animate({
        scrollTop: $($anchor.attr('href')).offset().top
    }, 300,'easeInOutExpo');


    event.preventDefault();
</code></pre>

<p>$('#faceb, #space_up_2, #facebook_gallery')
     .next().slideDown()</p>

<pre><code> $('#faceb')
 .css('background-position', 'right -20px')
</code></pre>

<p>});</p>

<pre><code>                  // LINK PORTFOLIO Siti web //

   $('#moveSiti').bind('click',function(event){
    var $anchor = $(this);

    $('html, body').stop().animate({
        scrollTop: $($anchor.attr('href')).offset().top
    }, 300,'easeInOutExpo');


    event.preventDefault();
</code></pre>

<p>$('#sitacci, #space_up_1, #web_design_gallery')
     .next().slideDown()</p>

<pre><code> $('#sitacci')
 .css('background-position', 'right -20px')

               $('#space_up_1, #web_design_gallery, #space_down_1').animate({'backgroundColor':'#fed078'}, 3000);

   setTimeout(function() {

   $('#space_up_1, #web_design_gallery, #space_down_1').animate({'backgroundColor':'#ffffff'}, 3000);


   }, 2000);
</code></pre>

<p>});</p>

<pre><code>              // LINK Servizi - FB //

   $('#moveFBMarketing').bind('click',function(event){
    var $anchor = $(this);

    $('html, body').stop().animate({
        scrollTop: $($anchor.attr('href')).offset().top
    }, 300,'easeInOutExpo');


    event.preventDefault();

    $('#face')
 .next().slideDown()

 $('#face')
 .css('background-position', 'right -20px')
</code></pre>

<p>});</p>

<pre><code>              // LINK Servizi - iphone //

   $('#moveIphone').bind('click',function(event){
    var $anchor = $(this);

    $('html, body').stop().animate({
        scrollTop: $($anchor.attr('href')).offset().top
    }, 300,'easeInOutExpo');


    event.preventDefault();

    $('#tel')
 .next().slideDown()

 $('#tel')
 .css('background-position', 'right -20px')
</code></pre>

<p>});</p>

<pre><code>                  // LINK Servizi - Fotoritocco //

   $('#moveFotoritocco').bind('click',function(event){
    var $anchor = $(this);

    $('html, body').stop().animate({
        scrollTop: $($anchor.attr('href')).offset().top
    }, 300,'easeInOutExpo');


    event.preventDefault();

    $('#ritocco')
 .next().slideDown()

 $('#ritocco')
 .css('background-position', 'right -20px')
</code></pre>

<p>});</p>

<pre><code>                  // LINK Servizi - traduzione //

   $('#moveTraduzione').bind('click',function(event){
    var $anchor = $(this);

    $('html, body').stop().animate({
        scrollTop: $($anchor.attr('href')).offset().top
    }, 300,'easeInOutExpo');


    event.preventDefault();

    $('#traduzione')
 .next().slideDown()

 $('#traduzione')
 .css('background-position', 'right -20px')
</code></pre>

<p>});</p>

<pre><code>              // LINK Servizi - realizzazione //

   $('#moveRealizzazione').bind('click',function(event){
    var $anchor = $(this);

    $('html, body').stop().animate({
        scrollTop: $($anchor.attr('href')).offset().top
    }, 300,'easeInOutExpo');


    event.preventDefault();

    $('#realizzazione')
 .next().slideDown()

 $('#realizzazione')
 .css('background-position', 'right -20px')
</code></pre>

<p>});</p>

<pre><code>});
</code></pre>
