个人博客、个人网站，看那些WordPress主题、Emlog主题、ZBlog主题、Typecho主题模板站，浏览器顶部有个进度条效果，显得非常的好看和与众不同，下面是实现页面顶部进度条效果代码分享。
<!DOCTYPE>
<html>
<head>
<title>全民博客</title>
</head>
<style type="text/css">
#bar{position:fixed;left:0;top:0;z-index:10000;width:100%;height:2px;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;background-color:transparent;color:#f46}
#bar::-webkit-progress-bar{background-color:transparent}
#bar::-webkit-progress-value{background-color:#f46}
#bar::-moz-progress-bar{background-color:#f46}
</style>
<body style="height:1000px;">
<p style="display:flex;align-items:center;justify-content:center;height:98%;cursor:pointer;">鼠标滑轮往下滚动，网站顶部有一个进度条效果。</p>
<script type="text/javascript">
document.addEventListener('DOMContentLoaded', function () {
var ght = window.innerHeight,
doc = document.documentElement.scrollHeight,
bar = document.querySelector('#bar');
bar.max = doc - ght;
bar.value = window.scrollY;
document.addEventListener('scroll', function () {
bar.max = document.documentElement.scrollHeight - window.innerHeight;
bar.value = window.scrollY;
});
});
</script>
<progress id="bar" value="0"></progress>
</body>
</html>你看，代码是不是超级简单。看到了，就拔下来，做个记录，以后需要用的话，就阔以直接使用啦。
本文结束
评论专区
上一篇
发表评论
评论列表（无评论）