统计
  • 文章总数:20 篇
  • 评论总数:0 条
  • 分类总数:23 个
  • 最后更新:6天前

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

本文阅读 1 分钟
本文最后更新于2022年11月30日,已超过8天没有更新。如果文章内容或图片资源失效,请留言反馈,我会及时处理,谢谢!

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

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

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

如图所示
1.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");

如下图:
2.png

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

原创文章,作者:苏晨,如若转载,请注明出处:https://blog.sxchl.cn/55.html
-- 展开阅读全文 --
文章版权声明 1、本网站名称:友晨科技
2、本站永久网址:www.youchen.club。本博客文章如若转载,请注明出处。
3、本网站的文章部分内容可能来源于网络,仅供大家学习与参考,如有侵权,请联系站长QQ528609062进行删除处理。
4、本站一切资源不代表本站立场,并不代表本站赞同其观点和对其真实性负责。
5、本站一律禁止以任何方式发布或转载任何违法的相关信息,访客发现请向站长举报
6、本站资源大多存储在云盘,如发现链接失效,请联系我们,我们会第一时间更新。
用js给博客代码块添加复制按钮的实现方法
« 上一篇 07-17
使用js给网站加一个复制弹窗
下一篇 » 07-17

发表评论

发表评论

作者信息

现在时间

动态快讯

    请配置好页面缩略名选项

热门文章

最多点赞

标签TAG

热评文章

最近回复