кнопка прокрутки вверх-вниз с использованием JavaScript не работает

Question

Прежде чем я начну, хочу отметить, что я не компетентен в кодировании вообще. Я на 100% энтузиаст-любитель, который учится на ходу во время кодирования, и у меня ограниченные знания об этом.

Я хочу добавить две кнопки рядом с полосой прокрутки / окном, как показано здесь: https://drive.google.com/open?id=1vvMNKguytQc_jtaVAYpOTJwVNZs4rmZY. Однако, как бы я ни старался, я не могу заставить его работать. Мой сайт использует JavaScript библиотеку jQuery v2.1.1. Мой вопрос: почему это не работает и как я могу заставить их работать?

var step = 25;
var scrolling = false;

// Wire up events for the 'scrollUp' link:
$("#scrollUp").bind("click", function(event) {
  event.preventDefault();
  // Animates the scrollTop property by the specified
  // step.
  $("#content").animate({
    scrollTop: "-=" + step + "px"
  });
}).bind("mouseover", function(event) {
  scrolling = true;
  scrollContent("up");
}).bind("mouseout", function(event) {
  scrolling = false;
});

$("#scrollDown").bind("click", function(event) {
  event.preventDefault();
  $("#content").animate({
    scrollTop: "+=" + step + "px"
  });
}).bind("mouseover", function(event) {
  scrolling = true;
  scrollContent("down");
}).bind("mouseout", function(event) {
  scrolling = false;
});

function scrollContent(direction) {
  var amount = (direction === "up" ? "-=1px" : "+=1px");
  $("#content").animate({
    scrollTop: amount
  }, 1, function() {
    if (scrolling) {
      scrollContent(direction);
    }
  });
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="section">
  <h2 class="section-title st2 mb25">Our Products</h2>
  <div class="container">
    <div class="row page-services mt10">
      <div class="col-sm-4 col-md-3 sm-box" id="content">
        <i class="fas fa-chevron-up" id="scrollUp"></i>
        <ul class="nav nav-tabs vertical">
          <li><a href="#tab1" data-toggle="tab">Product</a></li>
          <li><a href="#tab2" data-toggle="tab">Product</a></li>
          <li><a href="#tab3" data-toggle="tab">Product</a></li>
          <li><a href="#tab4" data-toggle="tab">Product</a></li>
          <li><a href="#tab5" data-toggle="tab">Product</a></li>
          <li><a href="#tab6" data-toggle="tab">Product</a></li>
          <li><a href="#tab6" data-toggle="tab">Product</a></li>
          <li><a href="#tab8" data-toggle="tab">Product</a></li>
        </ul>
        <i class="fas fa-chevron-down" id="scrollDown"></i>
      </div>
      <div class="col-sm-8 col-md-9">
        <div class="tab-content">

Вот источник javascript и демо: http://jsfiddle.net/s5mgX/1709/