Can I apply these settings to a custom site?

My main WordPress website is using your your plugin to create a scroll to top icon.

But I have two addition sites that are not WordPress orientated. They are actually built with HelpNDoc and I had added some custom php to display a scroll to top icon.

Here is one of the sites:

At the moment I am inserting this CSS in my help topics:

  <!-- For "Scroll to top" -->
  <link id="msa-font-awesome-css" href="//cdn.jsdelivr.net/fontawesome/4.7.0/css/font-awesome.min.css?ver=4.7.0" media="all" rel="stylesheet" type="text/css" />
  <script defer src="js/fontawesome.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <style type="text/css">
  #myBtn {
	position: fixed;
	right: 40px;
	bottom: 65px;
	display: none;
	border: none;
	outline: none;
	background: #d35438 !important;
	-moz-box-shadow: inset 0 30px 30px -30px #7F7F7F, inset 0 -30px 30px -30px #7F7F7F;
	-webkit-box-shadow: inset 0 30px 30px -30px #7F7F7F, inset 0 -30px 30px -30px #7F7F7F;
	box-shadow: inset 0 30px 30px -30px #606060, inset 0 -30px 30px -30px #606060;
	width: 45px;
	height: 45px;
	text-align: center;
	color: #E7D8A3 !important;
	padding: 8px;
	font-size: 20px;
	-webkit-transition: all 0.1s linear 0s;
	-moz-transition: all 0.1s linear 0s;
	-o-transition: all 0.1s linear 0s;
	transition: all 0.1s linear 0s;
	font-family: 'Tahoma', sans-serif;
	z-index: 99999999;
  }
  #myBtn:hover {
	opacity: 0.8;
	-moz-box-shadow: inset 0 0 20px #000000;
	-webkit-box-shadow: inset 0 0 20px #000000;
	box-shadow: inset 0 0 20px #000000;
  }  

And, each help topic has this at the bottom before the </body> tag:

  <!-- Code for scrolling back to the top of the article -->
  <script type="text/javascript">
    <!-- When the user scrolls down 20px from the top of the document, show the button -->
    window.onscroll = function() {scrollFunction()};

    function scrollFunction() {
      if (document.body.scrollTop > 100 || document.documentElement.scrollTop > 100) {
        document.getElementById("myBtn").style.display = "block";
      } else {
        document.getElementById("myBtn").style.display = "none";
      }
    }
  
    $('#myBtn').on('click', function (e) {
      e.preventDefault();
      $('html,body').animate({scrollTop: 0}, 1000);
    });
  </script>

Is it possible to change this CSS / Code so that my help site shows exactly the same scroll to top icon as done your plugin on the main site?

The page I need help with: [log in to see the link]