[SOLVED] Bootstrap Scrollspy does not work

I am trying to implement the [https://getbootstrap.com/docs/4.0/components/scrollspy][1] into a website.
The requirement is that the navigations dots at the right side should change the color depending from scroll position (bootstrap scrollspy feature) and change the color if clicked (see javascript function - this one works already).

But Scrollspy does not work:

I included all needed libraries (bootstrap css & js, jquery, popper)
The <body> has the right bootstrap and style tags
You can find the .cmp-anchorlist .anchorlist__link .active class to which it should change in css
Added the function in JS (last line) for activating the scrollspy function

Could anyone tell me what point I am missing?

Thank you very much!

$(document).ready(function () {
  $("li > a.anchorlist__link").click(function () {
    $("li > a.anchorlist__link").find("anchorlist__link").removeClass("anchorlist__link");
    $(this).addClass("anchorlist__link");
    $("li > a.anchorlist__link").css('background-color', '#ffffff');
    $(this).css('background-color', '#f08200');
  });
});
$('body').scrollspy({ target: '#navbar-right' , offset: 50});

body{
  position:relative
}
.cmp-anchorlist {
  position: fixed;
  right: 1em;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
}
@media screen and (max-width: 640px) {
  .cmp-anchorlist {
    /* display: none; */
  }
}
.cmp-anchorlist .anchorlist__list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.cmp-anchorlist .anchorlist__item {
  margin-bottom: 1em;
}
.cmp-anchorlist .anchorlist__item:last-child {
  margin-bottom: 0;
}
.cmp-anchorlist .anchorlist__link {
  background-color: #ffffff;
  border: 1px solid #707172;
  display: block;
  height: 1em;
  position: relative;
  transition: border 0.2s ease-out, background-color 0.2s ease-out;
  width: 1em;
}
.cmp-anchorlist .anchorlist__link:focus {
  outline: 0;
}
.cmp-anchorlist .anchorlist__link:hover {
  border-color: #f08200;
}
.cmp-anchorlist .anchorlist__link:hover .anchorlist__label,
.cmp-anchorlist .anchorlist__link:hover::before {
  opacity: 1;
  pointer-events: auto;
}


.cmp-anchorlist .anchorlist__link.active {
  background-color: #f08200;

}


.cmp-anchorlist .anchorlist__link::before {
  background-color: #f08200;
  content: '';
  display: block;
  height: 1px;
  left: -1.9375em;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  top: 50%;
  transition: 0.3s opacity;
  width: 1.25em;
}
.cmp-anchorlist .anchorlist__label {
  color: #707172;
  display: block;
  font-size: 0.9375em;
  opacity: 0;
  position: absolute;
  right: 100%;
  pointer-events: none;
  text-align: right;
  top: 0.6em;
  transition: 0.3s opacity;
  transform: translate(-3.125em, -50%);
  white-space: nowrap;
}

@media print {
  .cmp-anchorlist .anchorlist__item {
    display: none;
  }
}

.cmp-backtotop {
  margin-top: 0px;
}
.backtotop__anchor {
  background-color: #f0f0f0;
  color: #f08200;
  display: inline-block;
  padding: 8px;
}

@media print {
  .cmp-backtotop {
    display: none;
  }
}

<head>
  <meta http-equiv="cache-control" content="no-cache" />
  <meta http-equiv="pragma" content="no-cache" />
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 <link rel = "stylesheet" 
         href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
         integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" 
         crossorigin = "anonymous">
 
</head>

<body data-spy="scroll" data-target="#navbar-right" data-offset="50" style="overflow-y: scroll;height: 1500px;">
  <nav class="cmp-anchorlist" id="navbar-right">

    <ul class="anchorlist__list">
      <li class="anchorlist__item">
        <a href="#oben" class="anchorlist__link" title="Seitenanfang">

          <span class="anchorlist__label">Seitenanfang</span>
        </a>
      </li>
      <li class="anchorlist__item">
        <a href="#terms" class="anchorlist__link" title="Ausstattungsmerkmale">

          <span class="anchorlist__label">Ausstattungsmerkmale</span>
        </a>
      </li>
    </ul>
  </nav>

  <div id="oben">
    hier ist oben
    brrr brrr brrr <br>
    brrr brrr brrr <br>
    brrr brrr brrr <br>
    brrr brrr brrr <br>
    brrr brrr brrr <br>
    brrr brrr brrr <br>
    brrr brrr brrr <br>
    brrr brrr brrr <br> <br><br><br><br><br><br><br><br>
  </div>
  <div id="terms">
    hier ist terms
    brrr brrr brrr <br>
    brrr brrr brrr <br>
    brrr brrr brrr <br>
    brrr brrr brrr <br>
    brrr brrr brrr <br>
    brrr brrr brrr <br>
    brrr brrr brrr <br>
    brrr brrr brrr <br> brrr brrr brrr <br>
    brrr brrr brrr <br>
    brrr brrr brrr <br>
    brrr brrr brrr <br>
    brrr brrr brrr <br>
    brrr brrr brrr <br>
    brrr brrr brrr <br>
    brrr brrr brrr <br> brrr brrr brrr <br>
    brrr brrr brrr <br>
    brrr brrr brrr <br>
    brrr brrr brrr <br>
    brrr brrr brrr <br>
    brrr brrr brrr <br>
    brrr brrr brrr <br>
    brrr brrr brrr <br>
  </div>

   <!-- jQuery library -->
      <script src = "https://code.jquery.com/jquery-3.2.1.slim.min.js" 
         integrity = "sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" 
         crossorigin = "anonymous">
      </script>
      
      <!-- Popper -->
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" 
         integrity = "sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" 
         crossorigin = "anonymous">
      </script>
      
      <!-- Latest compiled and minified Bootstrap JavaScript -->
      <script src = "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" 
         integrity = "sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" 
         crossorigin = "anonymous">
      </script>



</body>

Bootstrap Scrollspy does not work - what is missing?