网站添加一个百分比滚动条
网站添加滚动条根据位置显示百分比，这个效果参考joe模板来的，其他网站大同小异。本博客主题我放在了评论底部，噗，顶部没找到合适的位置，随便扔下面了
第一步： 打开模板的 footer.php 文件，复制以下代码，粘贴在文件最后。
<script>
//加载显示
$(window).scroll(function() {
var a = $(window).scrollTop(),
c = $(document).height(),
b = $(window).height();
scrollPercent = a / (c - b) * 100;
scrollPercent = scrollPercent.toFixed(1);
$("#percentageCounter").css({
width: scrollPercent + "%"
});
}).trigger("scroll");
</script>第二步：打开CSS文件 style.css 把下面代码添加到最后。
#percentageCounter {
position: absolute;
z-index: 1;
left: 0;
bottom: -3px;
height: 3px;
border-radius: 1.5px;
background: linear-gradient(to right, #4cd964, #5ac8fa, #007aff);
transition: width 0.45s;
}最后一步： 代码放在合适的位置即可。
<div id="percentageCounter"></div>本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2021-03-198，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
腾讯云开发者
