使用javascript上下滚动按钮不起作用

Question

在我开始之前，我想指出一点，我不擅长编码。我是100％的业余爱好者，他会在编码的同时在旅途中学习，而我对这方面的知识都很有限。

我要在滚动条/窗口旁边添加两个按钮，如此处所示：https://drive.google.com/open?id=1vvMNKguytQc_jtaVAYpOTJwVNZs4rmZY。但是，尽我所能，我无法使其正常工作。我的网站使用jQuery v2.1.1 JavaScript库。我的问题是为什么它不起作用以及如何使它们起作用？

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/