WordPress不用外掛，輕鬆自製閱讀進度條

常常會在新聞網站或是文章為主的頁面看到閱讀進度的滾動條，可以隨時知道目前閱讀的進度到哪裡、大概還剩下多少內容…等，而出現的位置大部分會在視窗的最上方或黏在最下方。

因為看起來不困難，所以這次一樣不靠裝外掛，自己動手做，用了javascript搭配css來做出滾動進度條。如果不想要碰javascript的人，小編在網路上也有看到純css的閱讀進度條，他的做法蠻酷的，可以去看看XD

開始囉!這裡是用Codepen做Demo
在這個Demo裡頭還包含了其他的js功能，所以可以先看看做出來的效果就好

See the Pen Scroll animation by Ruby (@Rog95) on CodePen.

閱讀進度條程式碼

從範例來解析，我的作法會是
1. 滾動偵測，當有開始滾動就開始執行

$(window).scroll(function(){})

2. 計算你要的文章內容總長度

var length=$('.footer').offset().top-$('#tab3').innerHeight();

3. 把目前的滾動進度換成百分比

var percentage=$(this).scrollTop()/length*100+'%';

把目前滾動的進度除以文章總長度(或是頁面總長度，看個人)，並換算成百分比

4. 再把這個百分比當成名為progress裡面元素的寬度

$('.progress').find('p').css('width',percentage);

把progress區塊裡面有顏色的那一個元素的寬度設成剛剛所算出來的百分比。

最後整個有關進度條的程式碼大概會是這樣…

$(document).ready(function(){
  //scoll fixed progess bar
  $(window).scroll(function(){
   var position=$(this).scrollTop();
   var length=$('.footer').offset().top-$('#tab3').innerHeight();
   var percentage=$(this).scrollTop()/length*100+'%';
   $('.progress').find('p').css('width',percentage);
  })
})

以上就是閱讀文章的進度條程式碼，若要使用在wordpress上，可以在找到後台post.php檔案，在裡面新增custom的html，也就是新增progress這個div以及在這個div裡面放入有顏色的進度區塊，若你還不知道要去哪裡新增特定javascript或是jQuery檔，你可以點這裡看怎麼加入JS或CSS檔，都是不用外掛的喔! 小編目前就是要什麼功能就自己寫寫看，不然一堆零零碎碎的外掛擺在後台看了真的不太舒心。

當然如果你這樣看下來覺得還是太麻煩，最簡單的方法還是去安裝外掛那裡直接搜尋「Progress bar」等相近的字眼，相信很容易就可以找到了。