スクロールjsに別のクラスを追加

Question

私は非常にjavascriptに新しく、これを追加する方法についての手がかりはありません。

$(document).ready(function() { 
    $('.nav a').on('click', function(e) { 
    e.preventDefault(); 

    var target = $(this).attr('href'), 
     offset = $(target).offset().top - 70; 

    $('html, body').stop().animate({ 
     scrollTop: offset 
    }, 500); 
    }); 
$('.scroll ul li').click(function(e) { 
    var $this = $(this); 
    var prev = $(this).parent().find('.active'); 
    prev.removeClass('active'); 
    if (!$this.hasClass('active')) { 
    $this.addClass('active'); 
    } 
    e.preventDefault(); 
}); 
}); 

これは私が使用しているスクロールコードであり、それは私のnavbarにとって素晴らしい作品です！

んだけど、スクリプトも同じように、そのボタンで動作するように、このボタン

<a href="#about" class="btn btn-circle page-scroll"> 
    <i class="fa fa-angle-double-down animated"></i> 

は、どのように私はそれを作るか追加？ http://codepen.io/sbxn14/pen/egmKRr < - このサイトを含む私のコードネーム。

誰かが私を助けてくれることを願っています。

編集：
私はそれを追加していますが、手動でページをスクロールすると、navbarのアクティブリンクが切り替わるようにすることは可能ですか？私はこれについてgoogleを見てきましたが、何かを見つけることができませんでした。

Answer 1

ボタンをナビゲーションバーのリンクのようにスクロールさせるには、新しいクラスをクリックハンドラに追加するだけです。あなたは、単になどのクリックハンドラに新しいクラスを追加

$('.nav a').on('click', function(e) {

：

代わりの

：また

$('.nav a, .page-scroll').on('click', function(e) {

、あなたは次のようにそれを行うことができます$('.nav a').add('.page-scroll').on('click', function(e) {

あなたはまた、次のようにナビゲーションバーは、ボタンがクリックされたときに、対応するナビゲーションバーセグメントに.activeクラスを追加することにより、新たに可視域を強調するために取得することができます。

$('.page-scroll').click(function(e) { 
    $('.navbar-nav li:nth-child(2)').addClass('active'); 
}); 

ここでボタンスクロールの両方を紹介updated penですAboutセクションと、ナビゲーションバーのハイライト部分を変更します。

希望すると便利です。 :)