javascript - 导航栏特定的 jQuery 滚动动画

Question

我有一个固定的标题，其中有一些链接。现在，这段代码几乎就是我需要它工作的地方，主要问题是执行第二个函数时有延迟。它的预期目的是在单击绑定(bind)元素时滚动到页面顶部，但在以指定速度继续之前，它一开始速度很慢。我确信还有一种方法可以将它干掉并将其变成一个函数而不是两个单独的函数。任何帮助将不胜感激。

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