Навигатор JQuery Scroll Animation

Question

У меня есть фиксированный заголовок, из которого имеет несколько ссылок. Теперь этот код почти там, где мне нужно, чтобы он работал, основной проблемой является то, что при выполнении второй функции существует задержка. Он предназначен для прокрутки в верхней части страницы при нажатии связанного элемента, но сначала он делает это медленно, прежде чем продолжить с указанной скоростью. Я уверен, что есть также способ DRY это и превратить его в одну функцию вместо двух отдельных. Любая помощь будет принята с благодарностью.

$(function() { 
    $("[href^='#']").on("click", function(e) { 
    $("body, html").animate({ 
     scrollTop: $($(this).attr('href')).offset().top-$('.header').height()-$('.header').outerHeight() 
    }, 800); 
    e.preventDefault(); 
    });  
}); 


$(function(){ 
    $("#home").on("click", function(e){ 
     $("body, html").animate({ 
      scrollTop: 0 
     }, 800); 
     e.preventDefault(); 
    }); 
}); 

JSFiddle - http://jsfiddle.net/9by4n5cu/1/

Answer 1

Вы можете объединить две функции, как сильфона,

$(function() { 
    $("[href^='#']").on("click", function(e) { 

     var target = $(this).attr('href'); 

     var scrollTop = $(target).offset().top-$('.header').height()-$('.header').outerHeight(); 

     if (target =='#home'){ 
     scrollTop = 0; 
     } 

     $("body, html").animate({ 
       scrollTop: scrollTop 
      }, 800); 

     e.preventDefault(); 


    }); 

    }); 

Демо: http://jsfiddle.net/ibrahim12/9by4n5cu/3/

Answer 2

это задержка, потому что вызвать animate в два раза, так как то, что вы скажем, вам нужно объединить function, как это

$(function() { 
    $("[href^='#']").on("click", function (e) { 
     var link = $(this); 
     var $header = $('.header') 
     var top = link.attr("id") == "home" ? 0 : $(link.attr('href')).offset().top - $header.height() - $header.outerHeight() 

     //$("html").animate({ 

     $("body, html").animate({ // Use $("body, html") to work on all browser as noted by Ibrahim 
      scrollTop: top 
     }, 800); 
     e.preventDefault(); 
    }); 
}); 

Я использую первую функцию щелчка, а затем проверить, является ли идентификатор link, который щелкнул является home, если да, то установите top до 0, в противном случае сделать расчет, как вы раньше.

вот обновленный Fiddle Fiddle