无限滚动跳到页面顶部

Question

I'm using infinite scroll with masonry everything works fine and lines up correctly. I have a button that when i click it makes that div bigger and shows extra content. the button works and loads fine when the page initially loads but when i scroll down and infinite loads new items and if i click the button to show more it jumps to the top of the screen.

I'm guessing i have to do some callback? Im kinda confused on this. How should I approach it?

this is the code im using:

$(function(){

$(".fancybox").fancybox();
   var $container = $('.main_containera');
   $container.imagesLoaded(function(){
  $container.masonry({
    itemSelector: '.item1',
    columnWidth: 0
  });
});


var nextSelector = '.pagination-next a';
var origNextUrl = $(nextSelector).attr('href');
var offsetRegex = /(offset=)([0-9]+)/;
var offset = origNextUrl.match(offsetRegex)[2];


$container.infinitescroll({
  navSelector  : '.paginate',    // selector for the paged navigation 
  nextSelector : '.pagination-next a',  // selector for the NEXT link (to page 2)
  itemSelector : '.item1',     // selector for all items you'll retrieve
  loading: {
      finishedMsg: 'No more pages to load.',
      img: 'http://i.imgur.com/6RMhx.gif'
    }
  },
  // trigger Masonry as a callback
  function( newElements ) {
    // hide new items while they are loading
    var $newElems = $( newElements ).css({ opacity: 0 });
    // ensure that images load before adding to masonry layout
    $newElems.imagesLoaded(function(){
      // show elems now they're ready
      $newElems.animate({ opacity: 1 });
      $container.masonry( 'appended', $newElems, true );

    });
  }
);


$('.comment_tr').click(function (e) {
    $(this).toggleClass('disabled');
    $(this).parent().parent().parent().find('form').slideToggle(250, function () {
        $('.main_containera').masonry();
    });
    e.preventDefault();
}); 

  });

Answer 1

Try changing

$('.comment_tr').click(function (e) {
    $(this).toggleClass('disabled');
    $(this).parent().parent().parent().find('form').slideToggle(250, function () {
        $('.main_containera').masonry();
    });
    e.preventDefault();
});

to

$('.comment_tr').click(function (e) {
    $(this).toggleClass('disabled');
    $(this).parent().parent().parent().find('form').slideToggle(250, function () {
        $('.main_containera').masonry();
    });
    e.preventDefault();
    e.stopPropagation( );
});

The click event may be propagating up to another link element which has an empty href or one that returns the user to the same page which usually just takes you back to the top. Alternatively, you could replace e.preventDefault(); and e.stopPropagation(); with return false; .

It's hard to say for sure that that's the issue without seeing the HTML though.

Could you post the HTML if that change doesn't work?