ScrollTop jerky in Chrome

I have this code and I am unable to achieve a fluid movement using Scroll-to-top function and Cubic bezier / 'easeInOutCubic' at lower speed (e.g 4000-6000).

I've tried different alternatives with no luck. Also, I would like to mention that I am forced to use jQuery 2.1.3 due to the fact that, I am trying to implement this function in cargo.site environment and they have this version which can't be replaced in custom html section.

I would take into consideration a pure CSS alternative as well if Cubic Bezier could be emulated.

Tested in latest version of Chrome 113.0.5672.127 ,Win 10 64x. Thanks.

$(window).scroll(function() {
    if ($(this).scrollTop() > 350) {
        $('#scrlTop').fadeIn();
    } else {
        $('#scrlTop').fadeOut();
    }
});

$('#scrlTop').click(function () {
    $('html, body').animate({
        scrollTop: '0px'
    }, 4800, 'easeInOutCubic');
    return false;
});

#scrlTop {
      position: fixed;
      bottom: 16.6px;
      right: 18px;
      width: 57px;
      height: 57px;
      border-radius: 0%;
      background-color: black;
      display: none;
      backface-visibility: hidden;
      transform: translateZ(0);
}



/* Extra Things */
body{background-image: url(https://images.unsplash.com/photo-1484542603127-984f4f7d14cb?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxleHBsb3JlLWZlZWR8MTh8fHxlbnwwfHx8fHw%3D&w=1000&q=80);font-family: 'Open Sans', sans-serif;}h3{font-size: 30px; font-weight: 400;text-align: center;margin-top: 50px;}h3 i{color: #c6c6c6;}

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

<a id="scrlTop" href="#" class="hide"></a>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>

<!-- ICON NEEDS FONT AWESOME FOR CHEVRON UP ICON -->
<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">


<div style="height:2000px;">
  
  <h3>Scroll down</h3>
  <h3><i class="icon-arrow-down"></i>
  <h3>Scroll down</h3>
  <h3><i class="icon-arrow-down"></i>
  <h3>Scroll down</h3>
  <h3><i class="icon-arrow-down"></i>
  <h3>Scroll down</h3>
  <h3><i class="icon-arrow-down"></i>
  </h3></h3></h3></h3> 
</div>

Solution

I've managed to make it work using Vanilla JS without using jQuery. Works smooth in cargo.site environment.

var scrlTop = document.getElementById('scrlTop');

window.addEventListener('scroll', function() {
    if (window.pageYOffset > 350) {
        fadeIn(scrlTop);
    } else {
        fadeOut(scrlTop);
    }
});

scrlTop.addEventListener('click', function() {
    animateScrollTop(0, 4800);
    return false;
});

function fadeIn(element) {
    element.style.display = 'block';
}

function fadeOut(element) {
    element.style.display = 'none';
}

function animateScrollTop(target, duration) {
    var startPosition = window.pageYOffset;
    var distance = target - startPosition;
    var startTime = null;

    function scrollAnimation(currentTime) {
        if (startTime === null) {
            startTime = currentTime;
        }
        var timeElapsed = currentTime - startTime;
        var scrollPosition = easeInOutCubic(timeElapsed, startPosition, distance, duration);
        window.scrollTo(0, scrollPosition);

        if (timeElapsed < duration) {
            requestAnimationFrame(scrollAnimation);
        }
    }

    function easeInOutCubic(t, b, c, d) {
        t /= d/2;
        if (t < 1) {
            return c/2*t*t*t + b;
        }
        t -= 2;
        return c/2*(t*t*t + 2) + b;
    }

    requestAnimationFrame(scrollAnimation);
}

#scrlTop {
      position: fixed;
      bottom: 16.6px;
      right: 18px;
      width: 57px;
      height: 57px;
      border-radius: 0%;
      background-color: black;
      display: none;
      backface-visibility: hidden;
      transform: translateZ(0);
}



/* Extra Things */
body{background-image: url(https://images.unsplash.com/photo-1484542603127-984f4f7d14cb?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxleHBsb3JlLWZlZWR8MTh8fHxlbnwwfHx8fHw%3D&w=1000&q=80);font-family: 'Open Sans', sans-serif;}h3{font-size: 30px; font-weight: 400;text-align: center;margin-top: 50px;}h3 i{color: #c6c6c6;}

<a id="scrlTop" href="#" class="hide"></a>

<!-- ICON NEEDS FONT AWESOME FOR CHEVRON UP ICON -->
<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">


<div style="height:2000px;">
  
  <h3>Scroll down</h3>
  <h3><i class="icon-arrow-down"></i>
  <h3>Scroll down</h3>
  <h3><i class="icon-arrow-down"></i>
  <h3>Scroll down</h3>
  <h3><i class="icon-arrow-down"></i>
  <h3>Scroll down</h3>
  <h3><i class="icon-arrow-down"></i>
  </h3></h3></h3></h3> 
</div>