前言
非常的简单，根据自己需求复制就好了，记得确保 jQuery 已加载 
效果
代码
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>浏览进度条示例</title>
<style>
:root {
--back-line-right: linear-gradient(to right, #4caf50, #4caf50); /* 确保定义 CSS 变量 */
}
#scrollProgressBar {
width: 0;
height: 3px;
z-index: 1001;
background-image: var(--back-line-right);
border-radius: 5px;
position: fixed; /* 确保进度条固定在页面顶部 */
top: 0;
left: 0;
transition: width 0.45s;
}
</style>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<!-- 顶部浏览进度条 -->
<div id="scrollProgressBar"></div>
<div style="height: 2000px;"> <!-- 模拟长页面内容 -->
<h1>滚动以查看进度条</h1>
<p>这是一个示例页面，滚动以查看顶部进度条如何工作。</p>
<!-- 添加更多内容以增加页面高度 -->
</div>
<script>
$(window).scroll(function() {
let scrollTop = $(window).scrollTop(),
documentHeight = $(document).height(),
windowHeight = $(window).height();
let scrollPercent = (scrollTop / (documentHeight - windowHeight)) * 100;
scrollPercent = scrollPercent.toFixed(1);
$("#scrollProgressBar").css({
width: scrollPercent + "%"
});
}).trigger("scroll");
</script>
<!-- 顶部浏览进度条结束 -->
</body>
</html>
评论 (0)