效果展示：
html和js部分：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="./index.css"></head><body><div id="progress"><p class="pn"></p><div class="left"><div class="cir1"></div></div><div class="rig"><div class="cir2"></div></div><div class="wrap"><ul class="dots"><li></li><li></li><li></li></ul></div><div class="up"></div><div class="down"></div></div><div class="fill"></div><script>window.onload = function() {const progress = document.querySelector('#progress');const cir1 = document.querySelector('.cir1');const cir2 = document.querySelector('.cir2');const pn = document.querySelector('.pn');const dots = document.querySelector('.dots');const up = document.querySelector('.up');const down = document.querySelector('.down');function curProg(per) {console.log('per: ', per);if (per >= 0 && per <= 50) {cir1.style.transform = 'rotate(-135deg)';cir2.style.transform = `rotate(${-135 + 180 / 50 * per}deg)`;cir2.style.transition = `transform 0.05s`;} else if (per > 50 && per <= 100) {cir2.style.transform = 'rotate(45deg)';cir1.style.transform = `rotate(${-135 + 180 / 50 * (per - 50)}deg)`;cir1.style.transition = `transform 0.05s`;}}// console.log(document.documentElement.clientHeight, document.body.clientHeight);// 可滚动的总高度const th = document.body.clientHeight - document.documentElement.clientHeight;window.onscroll = function() {// console.log(document.documentElement.scrollTop);const st = document.documentElement.scrollTop;// console.log('st: ', st);const rp = Math.floor(st / th * 100);curProg(rp);if(rp === 0) {pn.classList.add('hide');dots.classList.remove('hide');} else {dots.classList.add('hide');pn.classList.remove('hide');(pn.innerHTML = rp + '%');}}progress.onclick = function() {if(dots.classList.contains('go')) {dots.classList.remove('go');dots.classList.add('back');up.classList.remove('go');up.classList.add('back');down.classList.remove('go');down.classList.add('back');} else {dots.classList.add('go');dots.classList.remove('back');up.classList.add('go');up.classList.remove('back');down.classList.add('go');down.classList.remove('back');}}up.onclick = function(e) {e.stopPropagation();document.documentElement.scrollTop = 0;}down.onclick = function(e) {e.stopPropagation();document.documentElement.scrollTop = th;}}</script></body></html>
css部分：
* {padding: 0;margin: 0;}ul, li {list-style-type: none;}.hide {display: none!important;}#progress {position: fixed;bottom: 40px;right: 40px;width: 54px;height: 54px;border-radius: 50%;display: flex;cursor: pointer;}.pn {position: absolute;z-index: 12;top: 0;left: 0;width: 100%;height: 100%;text-align: center;line-height: 54px;color: #ddd;pointer-events: none;}.left, .rig {position: relative;width: 50%;height: 100%;overflow: hidden;}.cir1, .cir2 {position: absolute;top: 0;width: 50px;height: 50px;border-radius: 50%;border: 2px solid #fff;}.cir1 {left: 0;border-left: 2px solid #708a97;border-bottom: 2px solid #708a97;transform: rotate(-135deg);}.cir2 {right: 0;border-top: 2px solid #708a97;border-right: 2px solid #708a97;transform: rotate(-135deg);}.fill {height: 3200px;}.wrap {position: absolute;z-index: 10;top: 50%;left: 50%;transform: translate(-50%, -50%);width: 48px;height: 48px;border-radius: 50%;background-color: #708a97;display: flex;justify-content: center;align-items: center;}@keyframes ro-go {0% {}90% {transform: rotate(-100deg);}100% {transform: rotate(-90deg);}}@keyframes ro-back {0% {transform: rotate(-90deg);}90% {transform: rotate(10deg);}100% {transform: rotate(0deg);}}.dots {width: 8px;height: 26px;display: flex;flex-direction: column;justify-content: space-between;align-items: center;}.dots.go {animation: ro-go 0.4s forwards;}.dots.back {animation: ro-back 0.4s forwards;}.dots li {width: 6px;height: 6px;border-radius: 50%;background-color: #fff;}.up, .down {position: absolute;width: 30px;height: 30px;border-radius: 50%;background-color: rgba(0, 0, 0, .7);color: #fff;opacity: 0;}.up::before, .down::before {content: "";position: absolute;left: 8px;width: 12px;height: 12px;border: 2px solid #fff;}.up::before {top: 11px;border-right: none;border-bottom: none;transform: rotate(45deg);}.down::before {top: 5px;border-left: none;border-top: none;transform: rotate(45deg);}@keyframes up-go {0% {}90% {top: -65px; opacity: .9;}100% {top: -60px; opacity: 1;}}@keyframes up-back {0% {top: -60px; opacity: 1;}100% {top: 0px; opacity: 0;}}.up {top: 0;right: 0;}.up.go {animation: up-go 0.4s forwards;}.up.back {animation: up-back 0.4s forwards;}@keyframes down-go {0% {}90% {left: -65px; opacity: .9;}100% {left: -60px; opacity: 1;}}@keyframes down-back {0% {left: -60px; opacity: 1;}100% {left: 0px; opacity: 0;}}.down {bottom: 0;left: 0;}.down.go {animation: down-go 0.4s forwards;}.down.back {animation: down-back 0.4s forwards;}
