First function is colorful rgb scroller(next to standard scroolbar), which indicates progress of page scroll. Second one is a classic scroll to top button.

FIRST FUNCTION

HTML

<button onclick="topFunction()" id="myBtn" title="SCROLL ME UP!">▲▲▲</button> 

JS

let mybutton = document.getElementById("myBtn");

window.onscroll = function() {scrollFunction()};

function scrollFunction() {
  if (document.body.scrollTop > 38 || document.documentElement.scrollTop > 512) {
    mybutton.style.display = "block";
  } else {
    mybutton.style.display = "none";
  }
}


function topFunction() {
  document.body.scrollTop = 0; // For Safari
  document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera
} 

SECOND FUNCTION

HTML

<div id="progressbar"></div>
<div id="scrollpath"></div>

JS

    let progress = document.getElementById('progressbar');
    let totalHeight = document.body.scrollHeight - window.innerHeight;
    window.onscroll = function () {
    let progressHeight = (window.pageYOffset / totalHeight) * 100;
    progress.style.height = progressHeight + "%";
        }

CSS

::-webkit-scrollbar
{
    width: 0;
}
#scrollPath
{
    position: fixed;
    top: 0;
    right: 0;
    width: 10px;
    height: 100%;
    background: rgba(255,255,255,0.05);
}
#progressbar
{
    position: fixed;
    top: 0;
    right: 0;
    width: 10px;

    background: linear-gradient(to top, #008aff,#00ffe7);
    animation: animate 5s linear infinite;
}
@keyframes animate
{
    0%,100%
    {
        filter: hue-rotate(0deg);
    }
    50%
    {
        filter: hue-rotate(360deg);
    }
}
#progressbar:before
{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, #008aff,#00ffe7);
    filter: blur(10px);
}
#progressbar:before
{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, #008aff,#00ffe7);
    filter: blur(30px);
}
::placeholder {
    color: white;
}

Separately functions work just fine.

It looks like that they interfere with each other.

Any ideas on what i’m doing wrong?

I expect to work them simultaneously.