私は無限スクロール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>