javascript - window jumping after ajax load

I have a blog w/ infinite scroll http://www.hvac-hacks.com , i also ajax load comments on each post. The top post doesnt jump after the comments ajax load, but as you go further down, and as you continue to load more pages, the jumping just gets worse and worse. I read that I just need to usereturn false and put that in every function and it still jumps.

EDIT: There is a block of JS that should move it proper, but not sure what this is about.

if ( location.hash ){
                        $('html, body').animate({
                            scrollTop: $( location.hash ).offset().top
                        });
                        $( location.hash ).addClass( 'inline-comments-highlight' );
                    }
Copy code

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+'"]';

    }


});
Copy code

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&#8230';
  $email = 'Email&#8230';
  $website = 'Website&#8230';
  $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 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" data-post_id="<?php echo $post->ID; ?>">
  <div id="inline_comments_ajax_target_<?php echo $post->ID; ?>" ></div>
  <div >Loading Comments&#8230;</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 >
      <div >
        <form action="javascript://" method="POST" id="default_add_comment_form-<?php echo $post->ID; ?>" >
          <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&#8230;" tabindex="4" id="comment_<?php echo $post->ID; ?>" name="comment" id="inline-comments-textarea" ></textarea>
          <span id ="inline-comments-more-handle_<?php echo $post->ID; ?>" ><a href="#"><?php echo $more['more']; ?></a></span>
          <div id = "inline-comments-more-container_<?php echo $post->ID; ?>" <?php if ( $user_email != null && isset( $keep_open ) && $keep_open != "on" ) : ?><?php endif; ?>>
            <div id="inline-comments-allowed-tags-container_<?php echo $post->ID; ?>" >
              Allowed <abbr title="HyperText Markup Language">HTML</abbr> tags and attributes:
              <code>&lt;a href="" title=""&gt; &lt;blockquote&gt; &lt;code&gt; &lt;em&gt; &lt;strong&gt;</code>
            </div>
            <div ><input type="text" tabindex="5" name="user_name" id="inline_comments_user_name_<?php echo $post->ID; ?>" placeholder="<?php print $name; ?>" value="<?php print $user_name; ?>" /></div>
            <div ><input type="email" required tabindex="5" name="user_email" id="inline_comments_user_email_<?php echo $post->ID; ?>" placeholder="<?php print $email; ?>" value="<?php print $user_email; ?>" /></div>
            <div ><input type="url" required tabindex="6" name="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 >
      <p>Please <?php echo wp_register('','', false); ?> or <a href="<?php print wp_login_url(); ?>" >Login</a> to leave Comments</p>
    </div>
  <?php endif; ?>
  </div>
</div>
<script id="inline-comments-script-<?php echo $post->ID; ?>" >
/*
  //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>
Copy code