jQuery好看的带进度指示器《返回顶部》

jQuery返回顶部，带有进度指示器，如图所示，html+css+jq，很简易，感觉特别实用，下面分享给大家吧

html:

css:

/* #Progress
================================================== */

.progress-wrap {
 position: fixed;
 right: 50px;
 bottom: 50px;
 height: 46px;
 width: 46px;
 cursor: pointer;
 display: block;
 border-radius: 50px;
 box-shadow: inset  0 0 0 2px rgba(255,255,255,0.2);
 z-index: 10000;
 opacity: 0;
 visibility: hidden;
 transform: translateY(15px);
 -webkit-transition: all 200ms linear;
 transition: all 200ms linear;
}
.progress-wrap.active-progress {
 opacity: 1;
 visibility: visible;
 transform: translateY(0);
}
.progress-wrap::after {
 position: absolute;
 font-family: 'unicons';
 content: '↑';
 text-align: center;
 line-height: 46px;
 font-size: 24px;
 color: var(--grey);
 left: 0;
 top: 0;
 height: 46px;
 width: 46px;
 cursor: pointer;
 display: block;
 z-index: 1;
 -webkit-transition: all 200ms linear;
 transition: all 200ms linear;
}
.progress-wrap:hover::after {
 opacity: 0;
}
.progress-wrap::before {
 position: absolute;
 font-family: 'unicons';
 content: '↑';
 text-align: center;
 line-height: 46px;
 font-size: 24px;
 opacity: 0;
 background-image: linear-gradient(298deg, var(--red), var(--yellow));
 -webkit-background-clip: text;
 -webkit-text-fill-color: transparent;
 left: 0;
 top: 0;
 height: 46px;
 width: 46px;
 cursor: pointer;
 display: block;
 z-index: 2;
 -webkit-transition: all 200ms linear;
 transition: all 200ms linear;
}
.progress-wrap:hover::before {
 opacity: 1;
}
.progress-wrap svg path { 
 fill: none; 
}
.progress-wrap svg.progress-circle path {
 stroke: var(--grey);
 stroke-width: 4;
 box-sizing:border-box;
 -webkit-transition: all 200ms linear;
 transition: all 200ms linear;
}

jq:

/* Please ❤ this if you like it! */
(function($) { "use strict";

 //Switch dark/light
 
 $(".switch").on('click', function () {
  if ($("body").hasClass("light")) {
$("body").removeClass("light");
$(".switch").removeClass("switched");
  }
  else {
$("body").addClass("light");
$(".switch").addClass("switched");
  }
 });
  
 $(document).ready(function(){"use strict";
 
  //Scroll back to top
  
  var progressPath = document.querySelector('.progress-wrap path');
  var pathLength = progressPath.getTotalLength();
  progressPath.style.transition = progressPath.style.WebkitTransition = 'none';
  progressPath.style.strokeDasharray = pathLength + ' ' + pathLength;
  progressPath.style.strokeDashoffset = pathLength;
  progressPath.getBoundingClientRect();
  progressPath.style.transition = progressPath.style.WebkitTransition = 'stroke-dashoffset 10ms linear';  
  var updateProgress = function () {
var scroll = $(window).scrollTop();
var height = $(document).height() - $(window).height();
var progress = pathLength - (scroll * pathLength / height);
progressPath.style.strokeDashoffset = progress;
  }
  updateProgress();
  $(window).scroll(updateProgress); 
  var offset = 50;
  var duration = 550;
  jQuery(window).on('scroll', function() {
if (jQuery(this).scrollTop() > offset) {
 jQuery('.progress-wrap').addClass('active-progress');
} else {
 jQuery('.progress-wrap').removeClass('active-progress');
}
  }); 
  jQuery('.progress-wrap').on('click', function(event) {
event.preventDefault();
jQuery('html, body').animate({scrollTop: 0}, duration);
return false;
  })
  
  
 });
 
})(jQuery);

样式里面的var(--grey)，记得替换为自己选择的颜色，关于返回顶部的大小，都可以在css里面调整，快试试吧