博客吧前面介绍过通过jquery插件infinite scroll实现滚动自动无限分页，在用户体验上有个很大的弊端，如果网站文章很多，访客要到达页面底部则比较困难。那么对于想避免这种情况的站长，可以使用infinite scroll插件手动加载的模式，即是当用户点击“查看更多”按钮时，ajax无刷新加载下一页文章列表。
操作方法：
1、下载infinite scroll插件：点击下载
2、把jquery.infinitescroll.js文件和behaviors/manual-trigger.js文件复制到自己主题的根目录
3、在主题的header.php文件</head>之前添加引用代码（前提是已经引入了jquery库文件）：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<script type="text/javascript" src="<?php bloginfo('template_url');?>/js/jquery.infinitescroll.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_url');?>/js/manual-trigger.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var infinite_scroll = {
loading: {
msgText: '',
finishedMsg: '<div class="pagenavi"><a rel="next" href="javascript:void(0);">所有文章均已加载完成</a></div>' //加载到最后一页的提示文字
},
behavior: 'twitter',
nextSelector:".pagenavi a",//分页的a标签
navSelector:".pagenavi",//分页的样式名称
itemSelector:".post", //每篇文章的样式名称
contentSelector:"#section" //列表的样式名称或ID名称
};
$( infinite_scroll.contentSelector ).infinitescroll( infinite_scroll, function(){
$('.pagenavi').insertAfter('#section'); //加载下一页后，分页条显示的位置
});
$( infinite_scroll.contentSelector ).infinitescroll( infinite_scroll );
});
</script>
|
4、以上js对应的html结构（参考）：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<div id="section"> <div class="post"> 单独一篇文章 </div> <div class="post"> 单独一篇文章 </div> <div class="post"> 单独一篇文章 </div> <div class="post"> 单独一篇文章 </div> </div> <div class="pagenavi"> <a href="#">查看更多</a> </div> |
注意：操作成功与否，最重要的是下一页的样式名称和链接是否正确！
原创文章，作者：ItWorker，如若转载，请注明出处：https://blog.ytso.com/tech/pnotes/248178.html