WordPress分页评论Ajax载入

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

<code>$body.animate({scrollTop: $('#comments').offset().top - 65}, 800 );</code>
 
$body.animate({scrollTop: $('#comments-list-title').offset().top - 65}, 800 );
/*
$body 代表 body 的 DOM，$(‘#comments-list-title’).offset().top – 65 
是评论列表的标题到页面顶部的距离再减去 65。
因此这一句是控制整个页面向上滑动到评论列表标题的位置以下 65 像素（再往下 65 像素是为了确保能看到这个标题），
800 是滑动的时间，800毫秒。
http://kayosite.com/?p=1916#comment-8925
 
$(selector).animate(styles,options)
animate() 方法执行 CSS 属性集的自定义动画。
该方法通过CSS样式将元素从一个状态改变为另一个状态。
.animate : http://www.w3school.com.cn/jquery/effect_animate.asp

scrollTop() 方法返回或设置匹配元素的滚动条的垂直位置。
scroll top offset 指的是滚动条相对于其顶部的偏移。
如果该方法未设置参数，则返回以像素计的相对滚动条顶部的偏移。
scrollTop : http://www.w3school.com.cn/jquery/css_scrolltop.asp

offset() 方法返回或设置匹配元素相对于文档的偏移（位置）。
.offset : http://www.w3school.com.cn/jquery/css_offset.asp
*/

1
2

<script type=”text/javascript” src=”http://ajax.useso.com/ajax/libs/jquery/2.0.3/jquery.min.js”>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54

/*wordpress评论分页ajax载入
 *
 *关键代码来自Kayo
 *《WordPress Ajax 评论分页》
 *http://kayosite.com/ajax-turn-page-for-wordpress-comments-list.html
 *
 *参考 http://fatesinger.com/731.html
 *
 *注释由 霖博客 http://youthlin.com/?p=480
 *
 */
 
//代码写在ready里
jQuery(document).ready(function($) {
  $body = (window.opera) ? (document.compatMode == "CSS1Compat" ? $('html') : $('body')) : $('html,body');
  //以下选择器均需对应你自己的网站相应的修改！
  $(document).on('click', '.comments-navi a', function(e) {//点击页码时执行
    e.preventDefault();//禁止浏览器按常规载入新页面
    $.ajax({//ajax无刷新载入评论
    /*
    *请参考W3CSchool的教程
    *jQuery ajax - ajax() 方法
    *http://www.w3school.com.cn/jquery/ajax_ajax.asp
    */
      type: "GET",
      url: $(this).attr('href'), //获取要打开页面的地址
      beforeSend: function() {//发送数据之前执行的函数

         //移除评论导航和评论
         $('.comments-navi').remove();
         $('.comment-list').remove();
         
         $('#loading-comments').slideDown();//滑入Loading提示
          ////////////////////////////////这里加一句：
         $body.animate({scrollTop: $('#comments').offset().top - 65}, 800 );
         },//beforeSend
      dataType: "html",//返回的是html
      success: function(out) {//成功接收数据后执行的函数
         result = $(out).find('.comment-list');//从返回数据中(html类型)找到评论
         abovenav = $(out).find('#comment-nav-above');//上导航栏
         belownav = $(out).find('#comment-nav-below');//下导航栏
         $('#loading-comments').slideUp(550);//向上淡出Loading
         $('#loading-comments').after(result.fadeIn(800));//淡入评论(result)到Loading的后面(.after)
        result.before(abovenav);//插入上导航栏到评论之前
        result.after(belownav);//插入下导航栏到评论之后
         }//success
    });//$.ajax
  });//function(e)
});//ready
/*
 *如果您的主题只有评论下方的导航的话，
 *那么就不需要上面那个abovenav
 */

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

<style> 
#loading-comments {
display: none; //不显示，只在触发关键代码时滑入页面
width: 100%; //宽度匹配页面宽度
height: 45px; //45像素高
background: #a0d536; //背景淡绿色
text-align: center; //文本居中
color: #fff; //文本颜色
font-size: 22px; //字体大小
line-height: 45px;//行高45像素
}
 </style>