效果展示:
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;
}