добавить еще один класс в прокрутку 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(); 
}); 
}); 

это код прокрутки, который я использую, и он отлично работает для моего навигатора!

, но я просто добавил эту кнопку

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

как я делаю это так, что скрипт работает с этой кнопкой таким же образом? http://codepen.io/sbxn14/pen/egmKRr < - мой код, содержащий этот сайт.

Я надеюсь, что кто-то может мне помочь.

EDIT:
Пока я добавляю его. возможно ли это сделать так, чтобы активная ссылка на навигационной панели переключалась, если я вручную просматриваю страницу? Я смотрел на 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) {

Вы также можете получить Navbar выделить вновь видимую область пути добавления .active класса к соответствующему сегменту NavBar, когда кнопка нажата, как показано ниже:

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

Вот updated pen демонстрации и кнопка прокрутки раздел About и изменение выделенной части навигационной панели.

Надеюсь, это поможет! :)