小破站配置低,请耐心等待3-5秒即可加载完成~~(๑•̀ㅂ•́)و✧~~

长时间未显示网站请尝试刷新本页面~~

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

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

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

第一步:

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

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

如图:

给网站顶部添加一个滚动条位置百分比教程 网站技术 第1张

第二步:

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

如下图:

给网站顶部添加一个滚动条位置百分比教程 网站技术 第2张

第三步:打开公用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;
}

如下图:

给网站顶部添加一个滚动条位置百分比教程 网站技术 第3张

网站技术

如何对个人博客进行SEO优化?

2022-3-14 14:31:18

网站技术

云函数每日网易云听歌及音乐人签到云豆

2022-3-14 14:32:38

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
有新私信 私信列表
搜索