给网站顶部添加一个滚动条位置百分比教程

广30/

网站顶部添加滚动条显示位置百分比教程,这里以Emlog模板进行演示,其他网站大同小异。

网站初衷为的是用户的体验感,在美化的同时,不要丧失理性,带不动的情况下就不要折腾了。

第一步:

打开模板的header.php文件,复制以下代码,放在合适的位置。

<div id=\"percentageCounter\"></div>

如图:

20220302060116-621e97ace8515.png插图

第二步:

打开 footer.php,把JS代码添加进去。

JS代码:

//加载显示    $(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\");

如下图:

20220302060117-621e97ad52f27.png插图(1)

第三步:打开公用CSS文件,把下面代码添加到最后就行。

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;}

如下图:

20220302060117-621e97ada9fde.png插图(2)

广30/
© 版权声明
THE END
喜欢就支持一下吧
点赞0 分享
风言风语 抢沙发
头像
欢迎您留下宝贵的见解!
提交
头像

昵称

取消
昵称表情代码图片