Zi 字媒體

常常會在新聞網站或是文章為主的頁面看到閱讀進度的滾動條，可以隨時知道目前閱讀的進度到哪裡、大概還剩下多少內容…等，而出現的位置大部分會在視窗的最上方或黏在最下方。 因為看起來不困難，所以這次一樣不靠裝外掛，自己動手做，用了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」等相近的字眼，相信很容易就可以找到了。