hrefの値を取得してアンカーにスクロールさせる方法

Question

jqueryを使用してナビゲーションをスクロール可能にしようとしていますが、何らかの理由で動作しません。私はたくさんのソリューションを試しましたが、どちらもうまくいかないようです。

マイコード：

HTML：

<nav class="column column-12 navigation nav"> 
     <ul> 
     <li class="active onee"><a href="#home" class="scrollable">Home</a></li> 
      <li class="onee"><a href="#portfolio" class="scrollable">Portfolio</a></li> 
      <li class="onee"><a href="#about" class="scrollable">About</a></li> 
       <li class="onee"><a href="#contact" class="scrollable">Contact</a></li> 
     </ul> 
     </nav> 
    </div> 
    </div> 

とすべての私のセクションでは、アンカーのhrefと同じクラスを持っています。

のjQuery：

$(document).ready (function() { 
$(".nav li").click(function() { 
$(".nav li").removeClass("active"); 
$(this).addClass("active"); 
}); 


var $clicked = $('a').attr('href').split("#").val(); 
$("a").click(function() { 
/*$(this).find('a').attr('href').split("#");*/ 
var url = $(this).attr("href"); 
$("body").animate({ 
/*scrollTop: $('.' + $kazkas).offset().top 
}, 1000);*/ 
scrollTop: $("." + url.split("#")).offset().top 
}, 1000); 
}); 
}); 

ここで私は、クリックされたアンカータグの値を取得し、ちょうど＃や追加を取り払うことで私の体をスクロールするためにそれを使用しようとしています「」セクションクラス名をターゲットにしています残念ながら、動作しません。

完全なコードは、私のcodepenで見つけることができます：http://codepen.io/Limpuls/pen/YGdmkW

任意のアイデア？

ありがとうございました。

Answer 1

分割後、配列に変換されます。あなたが変数に代入したくない場合、あなたは直接

以下のように使用することができますので、url.split（「＃」）

var arr = url.split("#"); 
// arr[0] = '' 
// arr[1] = "home" 

とその分割後、

var url = "#home"; 

を言うことができます

url.split("#")[1] 

また、デフォルトのアンカータグイベントを防止する必要があります。