jQuery scrollTopイベントがアニメーション化されていません

Question

スクロールトップと一緒にアニメーションを作成してアンカーリンクに円滑なスクロール効果を作成する必要があります。私の現在のプロジェクトでは、これは動作していません。すべてのanimate - scrollTopイベントは何もしません。ヘッダにjQuery 3.1.1をロードします。

$('a[href*=#]').on('click', function(event){  
    console.log("ScrollTop"); 
    $("html, body").animate({ scrollTop: 500 }, "slow"); 
    return false; 
}); 

は私が私のコンソールでscrollTopスプライトを見ることができますが、何のアニメーションがありません：私のフッターmain.jsでは、私は次のJavaScriptを使用します。私は何をすべきかわからない私は多くのことを試した。私はまた、それが今働いているすべての異なるブラウザでそれをテストしました。

Answer 1

これはあなたのために働く必要があります。

$('a[href^="#"]').on('click',function (e) { 
     var href = $(this).attr('href'); 
     e.preventDefault(); 
     var target = this.hash, 
     $target = $(target); 
     $('html, body').stop().animate({ 
      'scrollTop': $target.offset().top - 180 
     }, 900, 'swing', function() { 
      window.location.hash = target;   
     }); 
    }); 

Answer 2

問題がhrefであなたのセレクタが#は引用符なしで異なる意味を与える含まれていることです。 #を引用符で囲むと、うまく動作します。

$('a[href*="#"]').on('click', function(){ 
    $('html,body').animate({scrollTop: 500}, "slow");  
}); 

例：https://jsfiddle.net/3vy7adh7/

それとも

あなたが任意の有効なaタグにポストを回避したい場合

、

$('a').on('click', function(e) 
{  
    e.preventDefault(); 
    if($(this).attr('href').indexOf('#') > -1) 
     $('html,body').animate({scrollTop: 500},"slow");  
}); 

例：あなたの助けをhttps://jsfiddle.net/3vy7adh7/1/