使用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>]  ';
}
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>