Проблема с размещением страниц на одной странице firefox и IE

Question

Я пытаюсь создать веб-сайт прокрутки одной страницы. На веб-сайте есть панель навигации, позиция которой фиксируется, когда пользователь ее прокручивает. Проблема заключается в том, что когда страница прокручивается с помощью навигационных ссылок на слайд, после анимации она перескакивает назад, чтобы сделать слайды margin-top равными 0. (а не целая страница). Слайд, прокручиваемый вниз, Это происходит только в firefox и IE, он отлично работает в браузерах webkit. Пожалуйста, помогите мне исправить эту проблему. Мои коды следующие.

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 для СБН прокат

$('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, который я использую, чтобы сделать навигацию фиксированной

$(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

Вы устанавливаете window.location.hash, который вызывает страницу, чтобы перейти в некоторых браузерах. Чтобы этого не произошло, установите scrolltop снова сразу после установки хэша. Таким образом, вместо:

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

вы

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

Также см этой обновленной скрипки: http://jsfiddle.net/pyUY7/6/