给你的网站添加一个百分比滚动条

一枝梧桐 知识技能 12

网站顶部添加滚动条显示位置百分比教程,基本网站大同小异。
网站初衷为的是用户的体验感,在美化的同时,不要丧失理性,带不动的情况下就不要折腾了

第一步:

打开模板的 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>

标签: 网页设计 网页滚动条 HTML代码 php代码 PHP教程