<div class="wrap-move-top">
<input class="dial"/>
</div>
.wrap-move-top {
display: flex;
align-items: center;
justify-content: center;
float: left;
right: 19px;
bottom: 17px;
position: fixed;
width: 35px;
height: 35px;
border-radius: 50%;
cursor: pointer;
backdrop-filter: blur(5px);
overflow: hidden;
transition: 0.3s linear;
z-index: 120;
}
.wrap-move-top::after {
border-radius: 50%;
position: absolute;
width: 35px;
height: 35px;
margin-left: -7px;
margin-top: -17px;
top: 50%;
left: 50%;
font-family: "Font Awesome 5 Free";
font-weight: bold;
color: #ffd866;
content: '\f106';
font-size: 24px;
cursor: pointer;
z-index: 1;
-webkit-transition: all 0.2s linear;
transition: all 0.2s linear;
}
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/72900/jquery.knob.min.js"></script>
<script>
$(document).ready(function() {
var offset = 100,
scroll_top_duration = 700,
$go_top = $('.wrap-move-top'),
$thedial = $('.dial'),
$progress_circle = $('.wrap-move-top');
// Initialize the progress dial
$thedial.knob( {
'min' : 0,
'max' : 100,
'width' : 35,
'height' : 35,
'fgColor' : 'rgba(255, 216, 102, 1)',
'thickness' : .2,
'displayInput' : false,
'displayPreview' : false,
'readOnly' : true
});
$(window).scroll(function() {
// Hide or show the progress bar
($(this).scrollTop() > offset) ? $progress_circle.addClass('is-visible') : $progress_circle.removeClass('is-visible');
// Get the window position and set it to a variale
var s = $(window).scrollTop(),
d = $(document).height(),
c = $(window).height();
scrollPercent = (s / (d-c)) * 100;
// Bind the window position to the progress dial
$('.dial').val(scrollPercent).change();
});
//smooth scroll to top
$go_top.on('click', function(e) {
e.preventDefault();
$('body,html').animate( {
scrollTop: 0 ,
}, scroll_top_duration);
});
});
</script>