我有一个带有无限滚动的博客http://www.hvac-hacks.com，我还在每个帖子上加载了 ajax 评论。评论 ajax 加载后顶部的帖子不会跳转，但是随着您进一步下降，并且随着您继续加载更多页面，跳转只会越来越差。我读到我只需要使用return false它并将其放入每个函数中，它仍然会跳转。
编辑：有一块 JS 应该正确移动它，但不确定这是什么意思。
if ( location.hash ){
$('html, body').animate({
scrollTop: $( location.hash ).offset().top
});
$( location.hash ).addClass( 'inline-comments-highlight' );
}
JS：
jQuery(document).ready(function( $ ){
// $('#default_add_comment_form textarea').textareaAutoExpand();
/**
* Default ajax setup
*/
$.ajaxSetup({
type: "POST",
url: _inline_comments.ajaxurl,
dataType: "html"
});
window.inline_comments_ajax_load_template = function( params, my_global ) {
var my_global;
var request_in_process = false;
params.action = "inline_comments_load_template";
$.ajax({
data: params,
global: my_global,
success: function( msg ){
$( params.target_div ).fadeIn().html( msg );
request_in_process = false;
if (typeof params.callback === "function") {
params.callback();
}
return false;
}
});
return false;
}
/**
* Submit new comment, note comments are loaded via ajax
*/
$( document ).on('submit','.default-add-comment-form',function( e ) {
event.preventDefault();
var $this = $(this);
$this.css('opacity','0.5');
var full_id = this.id;
var explode_post_id = full_id.split("-",2);
var post_id = explode_post_id[1];
console.log ("posting a comment for post id: #"+post_id);
data = {
action: "inline_comments_add_comment",
post_id: post_id,
user_name: $('#inline_comments_user_name_'+post_id).val(),
user_email: $('#inline_comments_user_email_'+post_id).val(),
user_url: $('#inline_comments_user_url_'+post_id).val(),
comment: $( '#comment_'+post_id ).val(),
security: $('#inline_comments_nonce_'+post_id).val()
};
console.log ("data stream(var array data):");
console.log ("* action: "+data.action);
console.log ("* post_id: "+data.post_id);
console.log ("* user_name: "+data.user_name);
console.log ("* user_url: "+data.user_url);
console.log ("* comment: "+data.comment);
console.log ("* security: "+data.security);
console.log ("---end");
console.log ("target_div: "+"#inline_comments_ajax_target_"+post_id);
console.log ("template: " + $( '#inline_comments_ajax_handle' ).attr( 'data-template' ));
console.log ("post_id: " + post_id);
console.log ("security: " + $( '#inline_comments_nonce_'+post_id ).val());
$.ajax({
data: data,
global: false,
success: function( msg ){
inline_comments_ajax_load_template({
"target_div": "#inline_comments_ajax_target_"+post_id,
"template": $( '#inline_comments_ajax_handle' ).attr( 'data-template' ),
"post_id": post_id,
"security": $( 'inline_comments_nonce_' +post_id).val()
} );
$('textarea').val('');
$this.css('opacity','1');
return false;
},
fail: function(){
console.log("ajax failed");
},
always: function(){
console.log(msg);
}
});
});
/**
* Allow Comment form to be submitted when the user
* presses the "enter" key.
*/
$(document).on('keypress', '.default-add-comment-form',function (e) {
if (e.which == 13) {
console.log ("Enter Key Pressed - Submitting form");
console.log (this);
console.log ($(this));
$(this).submit();
return false;
}
});
$(window).on('scroll.inline-ajax-comments', function (e) {
var elem = isScrolledIntoView('.inline-comments-ajax-start')
if (elem)
{
var $elem = jQuery(String(elem));
if ($elem.hasClass('inline-comments-loaded')) {
//console.log($elem+'already loaded');
return false;
}
else {
$elem.addClass('inline-comments-loaded');
console.log('Load comments for '+$elem);
console.log('post id: '+$elem.attr('data-id'));
inline_comments_ajax_load($elem.attr('data-id'))
}
}
});
window.inline_comments_ajax_load = function(post_id){
//console.log("load comments for post "+post_id+"...");
if ( $( '#inline_comments_ajax_handle_'+post_id ).length ) {
$( '.inline-comments-loading-icon').show();
data = {
"action": "inline_comments_load_template",
"target_div": '#inline_comments_ajax_target_'+post_id,
"template": $( '#inline_comments_ajax_handle').attr( 'data-template' ),
"post_id": post_id,
"security": $('#inline_comments_nonce_'+post_id).val()
};
console.log("loading comments for post: "+data.post_id);
$.ajax({
data: data,
success: function( msg ){
$( '.inline-comments-loading-icon').fadeOut();
$( "#inline_comments_ajax_target_"+post_id).fadeIn().html( msg ); // Give a smooth fade in effect
if ( location.hash ){
$('html, body').animate({
scrollTop: $( location.hash ).offset().top
});
$( location.hash ).addClass( 'inline-comments-highlight' );
}
return false;
}
});
$( document ).on('click', '.inline-comments-time-handle', function( e ){
$( '.inline-comments-content' ).removeClass('inline-comments-highlight')
comment_id = '#comment-' + $( this ).attr('data-comment_id');
$( comment_id ).addClass('inline-comments-highlight');
});
}
return false;
}
$( document ).on('click','.inline-comments-more-handle', function( e ){
event.preventDefault();
//Get the post id
var full_id = this.id;
var explode_post_id = full_id.split("_",2);
var post_id = explode_post_id[1];
console.log (post_id);
if ( $( this ).hasClass('inline-comments-more-open_'+post_id) ){
$( 'a', this ).html( _inline_comments.custom_more.more );
$('#comment_'+post_id).animate({height: '32'},250);
} else {
$( 'a', this ).html( _inline_comments.custom_more.less );
$('#comment_'+post_id).animate({height: '100'},250);
}
$( this ).toggleClass('inline-comments-more-open_'+post_id);
$('#inline-comments-more-container_'+post_id).toggle();
});
/*
window.inline-comments-more-toggle = function(post_id){
if ( $( this ).hasClass('inline-comments-more-open_'+post_id) ){
$( 'a', this ).html('●●●');
$('#comment').css('height', '32');
} else {
$( 'a', this ).html('↑↑↑');
$('#comment').css('height', '150');
}
$( this ).toggleClass('inline-comments-more-open_'+post_id);
$('#inline-comments-more-container_'+post_id).toggle();
}
*/
window.isScrolledIntoView = function(elem) {
var docViewTop = $(window).scrollTop();
var docViewBottom = docViewTop + $(window).height();
var elemInView = false;
$( elem ).each(function() {
$this = $(this);
elemTop = $this.offset().top;
elemBottom = elemTop + $this.height();
if ((elemBottom <= docViewBottom) && (elemTop >= docViewTop)) {
elemInView = $this.attr('data-id');
}
});
//if (elemInView) console.log(elemInView+ " is in view!!!!");
if (elemInView) return elem+'[data-id="'+elemInView+'"]';
}
});
PHP
<?php
/**
* Our comments form template, the comments loop is loaded via html from inline_comments_load_template()
*/
if ( !defined( 'ABSPATH' ) ) die( 'You cannot access this template file directly' );
?>
<?php
$name = 'Name…';
$email = 'Email…';
$website = 'Website…';
$user_email = null;
$user_website = null;
$user_name = null;
$keep_open = get_option('keep_open');
$custom_more = get_option('custom_more');
$more = inline_comments_options( 'custom_more', empty( $custom_more ) ? 'default' : $custom_more );
if ( is_user_logged_in() ){
$current_user = wp_get_current_user();
$user_name = $current_user->display_name;
$user_email = $current_user->user_email;
$user_website = $current_user->user_url;
}
?>
<noscript>JavaScript is required to load the comments.</noscript>
<div class ="inline-comments-ajax-start" data-id="<?php echo $post->ID; ?>" ></div>
<div class="inline-comments-container" id="inline-comments-container_<?php echo $post->ID; ?>" name="comments" >
<div id="inline_comments_ajax_handle_<?php echo $post->ID; ?>" id="inline_comments_ajax_handle" class="inline_comments_ajax_handle last-child" data-post_id="<?php echo $post->ID; ?>">
<div id="inline_comments_ajax_target_<?php echo $post->ID; ?>" style="display: none;" ></div>
<div class="inline-comments-loading-icon">Loading Comments…</div>
<input type="hidden" name="inline_comments_nonce" value="<?php print wp_create_nonce('inline_comments_nonce'); ?>" id="inline_comments_nonce" />
<?php if ( get_option('comment_registration') != 1 || is_user_logged_in() ) : ?>
<div class="inline-comments-content inline-comments-content-comment-fields">
<div class="inline-comments-p">
<form action="javascript://" method="POST" id="default_add_comment_form-<?php echo $post->ID; ?>" class="default-add-comment-form">
<input type="hidden" name="inline_comments_nonce_<?php echo $post->ID; ?>" value="<?php print wp_create_nonce('inline_comments_nonce_'.$post->ID); ?>" id="inline_comments_nonce_<?php echo $post->ID; ?>" />
<?php inline_comments_profile_pic(); ?>
<textarea placeholder="Press enter to submit comment…" tabindex="4" id="comment_<?php echo $post->ID; ?>" name="comment" id="inline-comments-textarea" class="inline-comments-auto-expand submit-on-enter"></textarea>
<span id ="inline-comments-more-handle_<?php echo $post->ID; ?>" class="inline-comments-more-handle"><a href="#"><?php echo $more['more']; ?></a></span>
<div id = "inline-comments-more-container_<?php echo $post->ID; ?>" class="inline-comments-more-container" <?php if ( $user_email != null && isset( $keep_open ) && $keep_open != "on" ) : ?>style="display: none;"<?php endif; ?>>
<div id="inline-comments-allowed-tags-container_<?php echo $post->ID; ?>" class="inline-comments-allowed-tags-container">
Allowed <abbr title="HyperText Markup Language">HTML</abbr> tags and attributes:
<code><a href="" title=""> <blockquote> <code> <em> <strong></code>
</div>
<div class="inline-comments-field"><input type="text" tabindex="5" name="user_name" class="inline_comments_user_name" id="inline_comments_user_name_<?php echo $post->ID; ?>" placeholder="<?php print $name; ?>" value="<?php print $user_name; ?>" /></div>
<div class="inline-comments-field"><input type="email" required tabindex="5" name="user_email" class="inline_comments_user_email" id="inline_comments_user_email_<?php echo $post->ID; ?>" placeholder="<?php print $email; ?>" value="<?php print $user_email; ?>" /></div>
<div class="inline-comments-field"><input type="url" required tabindex="6" name="user_url" class="inline_comments_user_url" id="inline_comments_user_url_<?php echo $post->ID; ?>" placeholder="<?php print $website; ?>" value="<?php print $user_website; ?>" /></div>
</div>
</form>
</div>
</div>
<?php else : ?>
<div class="callout-container">
<p>Please <?php echo wp_register('','', false); ?> or <a href="<?php print wp_login_url(); ?>" class="inline-comments-login-handle">Login</a> to leave Comments</p>
</div>
<?php endif; ?>
</div>
</div>
<script id="inline-comments-script-<?php echo $post->ID; ?>" class="inline-comments-script" >
/*
//console.log ('<?php echo $post->ID; ?>' + 'has loaded...');
var tid_<?php echo $post->ID; ?> = setInterval( function () {
if ( document.readyState !== 'complete' ) return;
clearInterval( tid_<?php echo $post->ID; ?> );
//console.log ('running script for post id: <?php echo $post->ID; ?>');
inline_comments_ajax_load(<?php echo $post->ID; ?>)
}, 100 );
*/
</script>