文章閱讀進度條

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」等相近的字眼,相信很容易就可以找到了。

4 thoughts on “WordPress不用外掛,輕鬆自製閱讀進度條

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *