title: One page website positioning issue firefox and IE
body: <p>I am trying to design onepage scrolling web site. The web site has a navigation bar which is position become fixed when the user is scrolling it. The issue is, When the page scrolls down using the navigation links to a slide, after the animations it jumps back to the top to make slides margin-top to 0. <strong>(not the entireweb page. The slide that has scrolled down to)</strong>  This  happen only in firefox and IE it perfectly works on webkit browsers. Please help me to fix this issue
  My codes as follows.</p>
  
  <p><strong>html</strong></p>
  
  <pre><code>    &lt;div class="wrapper"&gt;
          &lt;nav class="mnav"&gt;
              &lt;ul&gt;
                  &lt;li&gt;&lt;a href="#slide1"&gt;home&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
              &lt;ul&gt;
                  &lt;li&gt;&lt;a href="#slide2"&gt;home&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
              &lt;ul&gt;
                  &lt;li&gt;&lt;a href="#slide3"&gt;home&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/nav&gt;
  
          &lt;div id="slide1" class="slide"&gt;&lt;/div&gt;
          &lt;div id="slide2" class="slide"&gt;&lt;/div&gt;
          &lt;div id="slide3" class="slide"&gt;&lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p><em><strong>css</em></strong></p>
  
  <pre><code>.slide {
  height: 800px;
  }
  #slide1 {
  background: red;
  }
  #slide2 {
  background: orange;
  }
  #slide3 {
  background: green;
  }
  
  .mnav li {
  display: inline;
  float: left;
  background: #fff;
  </code></pre>
  
  <p>}</p>
  
  <pre><code>.fixed  {
  position: fixed;
  top: 0; 
   }
  
      .fixed nav ul li {
  display: inline;
  float: left;
  background: #fff;
  }
  </code></pre>
  
  <p><strong>JQUERY for scrolling</strong></p>
  
  <pre><code>  $('document').ready(function() {
  var topRange = 350, // measure from the top of the viewport to X pixels down
  edgeMargin = 280, // margin above the top or margin from the end of the page
  animationTime = 4000, // time in milliseconds
  contentTop = [];
  
  $(document).ready(function() {
  
      // Stop animated scroll if the user does something
      $('html,body').bind('scroll mousedown DOMMouseScroll mousewheel keyup', function(e) {
          if (e.which &gt; 0 || e.type == 'mousedown' || e.type == 'mousewheel') {
              $('html,body').stop();
          }
      })
      // Set up content an array of locations
      $('nav').find('a').each(function() {
          contentTop.push($($(this).attr('href')).offset().top);
      })
      // Animate menu scroll to content
      $('nav').find('a').click(function() {
          var sel = this, newTop = Math.min(contentTop[ $('nav a').index($(this))], $(document).height() - $(window).height());
          // get content top or top position if at the document bottom
          $('html,body').stop().animate({
              'scrollTop' : newTop- 400
          }, animationTime, "easeInOutQuint",function() {
              window.location.hash = $(sel).attr('href');
          });
          return false;
      })
      // adjust  menu
      $(window).scroll(function() {
          var winTop = $(window).scrollTop(), bodyHt = $(document).height(), vpHt = $(window).height() + edgeMargin;
          // viewport height + margin
          $.each(contentTop, function(i, loc) {
              if ((loc &gt; winTop - edgeMargin &amp;&amp; (loc &lt; winTop + topRange || (winTop + vpHt ) &gt;= bodyHt ) )) {
                  $('nav a').removeClass('selected').eq(i).addClass('selected');
              }
          })
      })
  })
    });
  </code></pre>
  
  <p><strong>jquery that  i use to make navigation fixed</strong></p>
  
  <pre><code>$(document).ready(function() {
  $(window).scroll(function() {
      var scrollTop = 80;
      if ($(window).scrollTop() &gt;= scrollTop) {
          $('nav').addClass('fixed');
  
  
      }
      if ($(window).scrollTop() &lt; scrollTop) {
          $('nav').removeClass('fixed');
  
      }
  })
  })
  </code></pre>