搜索到
1
篇与
html
的结果
-
网站顶部浏览进度条 前言非常的简单，根据自己需求复制就好了，记得确保 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>
