使用javascript對長內容的文章進行分頁.

JS:

function divideContent(contentDomId,linkDomId){
 var maxCotentHeight = 600;
 var lineheight = parseInt(document.getElementById(contentDomId).style.lineHeight);
 maxCotentHeight = Math.ceil(maxCotentHeight/lineheight)*lineheight;
 document.getElementById(contentDomId).style.height = "";
 var contentHeight = document.getElementById(contentDomId).scrollHeight; 
 if(contentHeight>maxCotentHeight){ 
  document.getElementById(contentDomId).style.height = maxCotentHeight+"px";
 }

 
//下面解決了一個bug:最後一頁總是滿的,自動補充空白給最後一頁
 if(contentHeight%maxCotentHeight!=0&&contentHeight>maxCotentHeight){
  var extraHieght = maxCotentHeight - contentHeight%maxCotentHeight;
  var extraHTML='<div style="height:'+extraHieght+'px; width:100%"></div>';
  document.getElementById(contentDomId).innerHTML+=extraHTML;
 }   
 
 var pageCount = Math.ceil(contentHeight/maxCotentHeight);
 if(pageCount>1){
  var linkhtml = "";
  for(var i=0;i<pageCount;i++){
   linkhtml += '[<span style="cursor:pointer;text-decoration:underline;color:blue; font-weight:bold" onclick="document.getElementById(/''+contentDomId+'/').scrollTop='+i*maxCotentHeight+'">'+(1+i)+'</span>]&nbsp;&nbsp;';
  }
  document.getElementById(linkDomId).innerHTML = linkhtml;
 }
 
 document.getElementById(contentDomId).style.overflow = 'hidden';
 document.getElementById(contentDomId).style.display = 'block';
 document.getElementById(contentDomId).style.visibility = 'visible';
 document.getElementById(contentDomId).scrollTop = 0;
}

 

HTML:

<div id="articlecontent" style="line-height:16px; height:592px; overflow:hidden;">
      {$article.html}
</div>
<div id="articlecontentlink" style="line-height:16px;" align="center">
 </div>