Jquery scrollTo doesn't work on Firefox

Question

I'm using scrollTo-1.4.3.1. plugin to selected menu item, and this works perfectly on Chrome but on Firefox is the total opposite. Can anyone tell me why is this happening in Firefox and how can I fix this.

JS:

<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script src="../js/jquery.scrollTo-1.4.3.1-min.js"></script>
<script>
        $( document ).ready(function(e) {

            var lastId,
                topMenu = $(".main-nav"),
                topMenuHeight = topMenu.outerHeight()+15,
                // All list items
                menuItems = topMenu.find("a"),
                // Anchors corresponding to menu items
                scrollItems = menuItems.map(function(){
                  var item = $($(this).attr("href"));
                  if (item.length) { return item; }
                });         

            menuItems.click(function(e){
              var items = $('.main-nav li a');
              var lastItem = $('.main-nav li a:last');
              var index = items.index(lastItem);
              //alert(item);
              var href = $(this).attr("href"),
                  offsetTop = href === "#" ? 0 : $(href).offset().top-topMenuHeight+1;
            if(href=="#contact-section"){
              $('html, body').stop().animate({         
                  scrollTop: offsetTop+600
              }, "slow");
            }
            else
            $('html, body').stop().animate({ 
                  scrollTop: offsetTop
              }, "slow");
              e.preventDefault();
            });

        });
        </script>

And my HTML

<ul class="main-nav">
                    <li>
                        <a href="#portfolio" id="toTop">Client Portfolio</a>
                    </li>
                    <li>
                        <a href="#service-provided" id="toService">Service Provided</a>
                    </li>
                    <li>
                        <a href="#team-section" id="toTeam">Our Team</a>
                    </li>
                    <li>
                        <a href="#contact-section" id="toContact">Contact Us</a>
                    </li>
                </ul>

Answer 1

maybe try this script: http://jsfiddle.net/mekwall/up4nu/

  // Cache selectors
    var lastId,
    topMenu = $("#top-menu"),
    topMenuHeight = topMenu.outerHeight()+15,
    // All list items
    menuItems = topMenu.find("a"),
    // Anchors corresponding to menu items
    scrollItems = menuItems.map(function(){
      var item = $($(this).attr("href"));
      if (item.length) { return item; }
    });

    // Bind click handler to menu items
    // so we can get a fancy scroll animation
    menuItems.click(function(e){
    var href = $(this).attr("href"),
      offsetTop = href === "#" ? 0 : $(href).offset().top-topMenuHeight+1;
    $('html, body').stop().animate({ 
      scrollTop: offsetTop
    }, 300);
    e.preventDefault();
    });

    // Bind to scroll
    $(window).scroll(function(){
    // Get container scroll position
    var fromTop = $(this).scrollTop()+topMenuHeight;

    // Get id of current scroll item
    var cur = scrollItems.map(function(){
     if ($(this).offset().top < fromTop)
       return this;
    });
    // Get the id of the current element
    cur = cur[cur.length-1];
    var id = cur && cur.length ? cur[0].id : "";

    if (lastId !== id) {
       lastId = id;
       // Set/remove active class
       menuItems
         .parent().removeClass("active")
         .end().filter("[href=#"+id+"]").parent().addClass("active");
   }                   
   });

Answer 2

Try this:

change html,body as window

    $('window').stop().animate({         
                      scrollTop: offsetTop+600
                  }, "slow");