X  
登录

还没有账号?立即注册

忘记密码?
登陆
X  
注册

已经有账号?马上登陆

获取验证码
重新获取(60s)
立即注册
统计
  • 建站日期:2021-03-10
  • 文章总数:46 篇
  • 评论总数:18 条
  • 分类总数:14 个
  • 最后更新:7月10日
文章 建站技术

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

九霄子
首页 建站技术 正文

网站顶部添加滚动条显示位置百分比教程,这里以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
张图片

版权说明
文章采用: 《署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0)》许可协议授权。
版权声明:未标注转载均为本站原创,转载时请以链接形式注明文章出处。如有侵权、不妥之处,请联系站长删除。敬请谅解!

-- 展开阅读全文 --
Emlog文章GID断号自动补入
« 上一篇
网站添加简单的返回顶部特效
下一篇 »

发表评论

HI ! 请登录
注册会员,享受下载全站资源特权。
登陆 注册
社交账号登录

热门文章