1 效果

WordPress – 在文章页顶部加入百分比阅读滚动进度条-StubbornHuang Blog

当网站上文章内容较长时,我们可以在文章页顶部加入一个百分比阅读滚动进度条,随着用户不断滚动页面浏览内容时,顶部的阅读进度条会不断变长。

1.1 实现代码

  • html代码

在文章页标签下面第一行加入以下html代码:

<div id="readprogressbar"></div>
  • css代码
#readprogressbar {
        background-color: #ff6651;
        height: 3px;
        width: 0px;
        position: fixed;
        left: 0px;
        top: 0px;
        z-index: 9999;
}
  • js代码
$(function() {
    function scroll_fn() {
        document_height = $(document).height();
        scroll_so_far = $(window).scrollTop();
        window_height = $(window).height();
        max_scroll = document_height - window_height;
        scroll_percentage = scroll_so_far / (max_scroll / 100);
        $('#readprogressbar').width(scroll_percentage + '%');
    }
    $(window).scroll(function() {
        scroll_fn();
    });
    $(window).resize(function() {
        scroll_fn();
    });
});

1.2 完整的的网页文件示例

如果您觉得对您有帮助,可以请站长喝一杯咖啡哦!

记得在赞赏备注里写上您的昵称

您可在本站资助名单中查看你的打赏记录哦!

支付宝扫一扫

微信扫一扫

金额随意,礼轻义重

当前分类随机文章推荐

全站随机文章推荐

关于本站站长 StubbornHuang
WordPress – 在文章页顶部加入百分比阅读滚动进度条-StubbornHuang Blog纵使晴明无雨色,入云深处亦沾衣。