随滚动条变动的圆环滚动进度条，goTop按钮整合案例

最新推荐文章于 2023-10-13 13:17:58 发布

新生代农民工官方认证码农小拽

最新推荐文章于 2023-10-13 13:17:58 发布

阅读量105

点赞数 1

分类专栏：案例测试

本文链接：https://blog.csdn.net/tuzi007a/article/details/126632453

版权

HTML JavaScript 滚动进度 DOM操作 CSS动画

关键词由CSDN通过智能技术生成

案例测试专栏收录该内容

12 篇文章 3 订阅

订阅专栏

效果展示：

在这里插入图片描述

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;
}