Добавить еще один класс для прокрутки 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 <- мой кодовый блок, содержащий этот сайт.

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

РЕДАКТИРОВАТЬ:
Пока я добавляю это. Можно ли сделать так, чтобы активная ссылка на панели навигации переключалась, если я вручную прокручиваю страницу? Я искал в 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');
});

Вот обновленная ручка, показывающая обе кнопки, прокручивая к About раздел, и изменение выделенной части панели навигации.

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