Adding nice scroll bar to the page

I want to add this beautiful scroll bar implemented using Nice Scroll plugin to my web page:

my web I think the page is using an HTML structure like below and adds functionality to the scrollbar using the Nice Scroll plugin.

$(function() {
  $("#ascrail2000").niceScroll();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="ascrail2000" class="nicescroll-rails" style="width: 10px; z-index: 2999; cursor: default; position: fixed; top: 0px; height: 100%; right: 0px; opacity: 1; border-radius: 10px;">

  <div style="position: relative; top: 40px; float: right; width: 3px; height: 103px; background-color: rgb(240, 159, 5); border: none; background-clip: padding-box; border-radius: 0px;">

  </div>

</div>

<div id="ascrail2000-hr" class="nicescroll-rails" style="height: 10px; z-index: 2999; position: fixed; left: 0px; width: 100%; bottom: 0px; opacity: 1; cursor: default; display: none;">

  <div style="position: relative; top: 0px; height: 10px; width: 1536px; background-color: rgb(240, 159, 5); border: none; background-clip: padding-box; border-radius: 0px;">

  </div>

</div>

I can't make the code working without a hand... What I'm missing?

Note: I wrote the script tag myself and I think there is a problem with it.

Solution

I didn't understand what did you try to do, but take a look in my example. It works by setting config params and also including the cdn of nice scroll plugin.

Add this cdn after jquery:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.nicescroll/3.7.6/jquery.nicescroll.min.js"></script>

Nice scroll initialisation for example:

$("#ascrail2000").niceScroll({
   cursorwidth:3,
  cursoropacitymin:0.4,
  cursorcolor:'rgb(240, 159, 5)',
  cursorborder:'none',
  cursorborderradius:4,
  autohidemode:'leave'});

plunker example

For more examples please take a look at the official site: https://nicescroll.areaaperta.com/demo/