One page website positioning issue firefox and IE

Question

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. (not the entireweb page. The slide that has scrolled down to) This happen only in firefox and IE it perfectly works on webkit browsers. Please help me to fix this issue My codes as follows.

html

    <div class="wrapper">
        <nav class="mnav">
            <ul>
                <li><a href="#slide1">home</a></li>
            </ul>
            <ul>
                <li><a href="#slide2">home</a></li>
            </ul>
            <ul>
                <li><a href="#slide3">home</a></li>
            </ul>
        </nav>

        <div id="slide1" class="slide"></div>
        <div id="slide2" class="slide"></div>
        <div id="slide3" class="slide"></div>
    </div>

css

.slide {
height: 800px;
}
#slide1 {
background: red;
}
#slide2 {
background: orange;
}
#slide3 {
background: green;
}

.mnav li {
display: inline;
float: left;
background: #fff;

}

.fixed  {
position: fixed;
top: 0; 
 }

    .fixed nav ul li {
display: inline;
float: left;
background: #fff;
}

JQUERY for scrolling

  $('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 > 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 > winTop - edgeMargin && (loc < winTop + topRange || (winTop + vpHt ) >= bodyHt ) )) {
                $('nav a').removeClass('selected').eq(i).addClass('selected');
            }
        })
    })
})
  });

jquery that i use to make navigation fixed

$(document).ready(function() {
$(window).scroll(function() {
    var scrollTop = 80;
    if ($(window).scrollTop() >= scrollTop) {
        $('nav').addClass('fixed');


    }
    if ($(window).scrollTop() < scrollTop) {
        $('nav').removeClass('fixed');

    }
})
})

Answer 1

You are setting the window.location.hash which causes the page to jump in some browsers. To stop this from happening, set the scrolltop again right after you set the hash. So instead of:

..., animationTime, function() {
    window.location.hash = $(sel).attr('href');
}...

you do

..., animationTime, function() {
    window.location.hash = $(sel).attr('href');
    $('html,body').scrollTop(newTop-200);
}...

Also see this updated fiddle: http://jsfiddle.net/pyUY7/6/