---
title: "WordPress 实现顶部百分比滚动加载进度条 - 一纸忘忧"
description: "前不久我写过一篇《WordPress 顶部加载进度条代码》，是用来显示网站加载时间的，和上次的功能类似。"
canonical_url: "https://www.ikxin.com/article/wordpress-scroll-progress"
last_updated: "2026-09-16T09:59:27.259Z"
locale: zh-cn
meta:
  "og:description": "前不久我写过一篇《WordPress 顶部加载进度条代码》，是用来显示网站加载时间的，和上次的功能类似。"
  "og:image": "https://www.ikxin.com/_og/d/h_630%2Ca_~V29yZFByZXNzIOWunueOsOmhtumDqOeZvuWIhuavlOa7muWKqOWKoOi9vei~m-W6puadoSAtIOS4gOe6uOW~mOW~pw%2Cc_Article%2Ctitle_~V29yZFByZXNzIOWunueOsOmhtumDqOeZvuWIhuavlOa7muWKqOWKoOi9vei~m-W6puadoQ%2Cdescription_~5YmN5LiN5LmF5oiR5YaZ6L-H5LiA56-H44CKV29yZFByZXNzIOmhtumDqOWKoOi9vei~m-W6puadoeS7o-eggeOAi--8jOaYr-eUqOadpeaYvuekuue9keermeWKoOi9veaXtumXtOeahO-8jOWSjOS4iuasoeeahOWKn-iDveexu-S8vOOAgg%2CsiteName_~5LiA57q45b-Y5b-n%2CsiteHost_www.ikxin.com%2Cp_Ii9hcnRpY2xlL3dvcmRwcmVzcy1zY3JvbGwtcHJvZ3Jlc3Mi%2Cs_kfb6bDKOhrka4mgi.png"
  "og:image:alt": "WordPress 实现顶部百分比滚动加载进度条 - 一纸忘忧"
  "og:image:height": "630"
  "og:image:type": image/png
  "og:image:width": "1200"
  "og:title": "WordPress 实现顶部百分比滚动加载进度条"
  "twitter:image": "https://www.ikxin.com/_og/d/h_630%2Ca_~V29yZFByZXNzIOWunueOsOmhtumDqOeZvuWIhuavlOa7muWKqOWKoOi9vei~m-W6puadoSAtIOS4gOe6uOW~mOW~pw%2Cc_Article%2Ctitle_~V29yZFByZXNzIOWunueOsOmhtumDqOeZvuWIhuavlOa7muWKqOWKoOi9vei~m-W6puadoQ%2Cdescription_~5YmN5LiN5LmF5oiR5YaZ6L-H5LiA56-H44CKV29yZFByZXNzIOmhtumDqOWKoOi9vei~m-W6puadoeS7o-eggeOAi--8jOaYr-eUqOadpeaYvuekuue9keermeWKoOi9veaXtumXtOeahO-8jOWSjOS4iuasoeeahOWKn-iDveexu-S8vOOAgg%2CsiteName_~5LiA57q45b-Y5b-n%2CsiteHost_www.ikxin.com%2Cp_Ii9hcnRpY2xlL3dvcmRwcmVzcy1zY3JvbGwtcHJvZ3Jlc3Mi%2Cs_kfb6bDKOhrka4mgi.png"
  "twitter:image:alt": "WordPress 实现顶部百分比滚动加载进度条 - 一纸忘忧"
---

> Index of every page on this site: [llms.txt](https://www.ikxin.com/llms.txt)

# **WordPress 实现顶部百分比滚动加载进度条**

2017.06.06 3,983  0

前不久我写过一篇《 [WordPress 顶部加载进度条代码](https://blog.ikxin.com/archives/13.html)》，是用来显示网站加载时间的，和上次的功能类似。

今天我给大家带来的是一个浏览横向进度条，随着网页向下浏览，进度条会逐渐变长。此外，它还支持自定义滚动条颜色。目前本站已经应用了该代码，效果可以直接查看本站页面。下面是代码分享：

## HTML 代码

 HTML

```
<div id="load"></div>
```

## CSS 代码

 CSS

```
#load {
    background-color: #ff6651;
    height: 3px;
    width: 0px;
    position: fixed;
    left: 0px;
    top: 0px;
    z-index: 9999;
}
```

## JS 代码

 JavaScript

```
$(function() {
    function scroll_fn() {
        let document_height = $(document).height();
        let scroll_so_far = $(window).scrollTop();
        let window_height = $(window).height();
        let max_scroll = document_height - window_height;
        let scroll_percentage = scroll_so_far / (max_scroll / 100);
        $('#load').width(scroll_percentage + '%');
    }
    $(window).scroll(function() {
        scroll_fn();
    });
    $(window).resize(function() {
        scroll_fn();
    });
});
```

**注意**：HTML 代码需要放在 `body` 标签下的第一行。

## **评论**

(0)

暂无评论，来说两句吧

## **发布评论**

```json
{"@context":"https://schema.org","@graph":[{"@id":"https://www.ikxin.com/#website","@type":"WebSite","description":"一纸忘忧的个人网站，关于技术探索与日常生活，记录 Web 开发、服务端与 DevOps 实践，分享软件工具、数码体验，以及代码之外的见闻与思考。","inLanguage":"zh-CN","name":"一纸忘忧","url":"https://www.ikxin.com/","workTranslation":[{"@id":"https://www.ikxin.com/zh-tw#website"},{"@id":"https://www.ikxin.com/ko#website"},{"@id":"https://www.ikxin.com/en#website"},{"@id":"https://www.ikxin.com/ja#website"}]},{"@id":"https://www.ikxin.com/article/wordpress-scroll-progress#webpage","@type":"WebPage","description":"前不久我写过一篇《WordPress 顶部加载进度条代码》，是用来显示网站加载时间的，和上次的功能类似。","name":"WordPress 实现顶部百分比滚动加载进度条","url":"https://www.ikxin.com/article/wordpress-scroll-progress","isPartOf":{"@id":"https://www.ikxin.com/#website"},"potentialAction":[{"@type":"ReadAction","target":["https://www.ikxin.com/article/wordpress-scroll-progress"]}]}]}
```

## Sitemap

See the full [sitemap](https://www.ikxin.com/sitemap.md) for all pages.