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

发布日期:2021-03-13 11:30:26

  • 正文内容
  • 相关推荐

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

这个效果参考joe模板来的。综合说一句,网站初衷为的是用户的体验感,在美化的同时,不要丧失理性,带不动的情况下就不要折腾了。

第一步:

打开模板header.php文件,复制以下代码,粘贴在文件最后,如图。

1615635689(1).jpg

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

第二步:


打开 footer.php,把JS代码添加进去如下图:

1615635740(1).jpg

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");

第三步:


打开CSS文件夹里面的swipebox.css文件 把下面代码添加到最后就行。

1615635797(1).jpg

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


头像
ღ 我愿用一世阳光换你的微笑 ღ

本文标签:

文章标题:给网站顶部添加一个滚动条位置百分比教程

文章链接:https://www.dcqzz.cn/post/1550

版权声明:若无特殊注明,本文皆为 优秀 原创,转载请保留文章出处。