O
O
olol7772015-10-31 22:03:51
JavaScript
olol777, 2015-10-31 22:03:51

When you click on a button that loads content on ajax, the viewport "jumps" to the very top. How to decide?

Good afternoon! I can’t figure out why it “jumps” to the top of the page, the error is definitely in the columsSize function, if you remove it, then everything is fine.
AJAX code:

$('body').on('click', '.load-more-posts', function() { 
         
        if ($('body').hasClass('load') ) { 
            return false;
        }

        var button = $(this);

        $.ajax({
            type: "POST",
            url : Twelve.ajaxUrl,
            data: {
                action : $(button).attr('data-function'),
                offset: $('#mass-block > article').length,
                search: $('body').is('.search') ? getParameterByName('s') : false,
                category: $('.sub-category .sub-m span').attr('data-sort-value')
            },
            beforeSend: function() {
                $('body').addClass('load');
                $(button).closest('.load-more').find('img').addClass('show-preloader');
            },
            success: function(data) {
                
                $('body').removeClass('load');
                var json = JSON.parse(data);
                var $newEls = $(json.html);
                                
                $('#mass-block').append( $newEls ).isotope( 'insert', $newEls );
                                
                columsSize();       ///////////////////Проблема тут, код ниже///////////////////
                 
                $('.animated:not(.load-block)').addClass('zoomIn load-block');
                 
                if (json.posts == false) {
                    $('.pre-footer').removeClass('zoomIn').addClass('zoomOut');
                    $('.pre-footer .load-more').addClass('hide-block');
                }
                 
                initAfterAjaxEvents();
                 
                setTimeout(function() {
                    $(button).closest('.load-more').find('img').removeClass('show-preloader');
                    $('.site-wrapper .animated').removeClass('zoomIn');
                }, 200);
            }
        });
        
        return false;    
        
    });

columsSize code:
function columsSize(){
  var $fm = 4,$fl = 4,$rod = $('#mass-block').width();

  if ($('body').width() + scrollWidth >= 1230){
    var $col = Math.floor($rod/8),$fl = $fl+2;
    $('.ib-4, .ib-5').height($col*2);
  }
  else if ($('body').width() + scrollWidth >= 992){
    var $col = Math.floor($rod/6),$fl = $fl+2;
    $('.ib-4, .ib-5').height($col*2);
  }
  else if ($('body').width() + scrollWidth >= 767){
    var $col = Math.floor($rod/4);
    $('.ib-4, .ib-5').height(300);
  }
  else if ($('body').width() + scrollWidth > 500){
    var $col = $rod/4;
    $('.ib-4, .ib-5').height(300);
  }
  else {
    var $col = Math.floor($rod/1*2)/4,$fm = $fm/2,$fl = $fl/2;
    $('.ib-4').height(400);
    $('.ib-5').height(450);
  }

  $('.ib-1, .ib-2-1').width($col);

  $('.ib-2, .ib-3').width($col*2);
  $('.ib-4').css("width", $col*$fm);
  $('.ib-5').width($col*$fl);

  $('.ib-1, .ib-2').height($col);
  $('.ib-2-1, .ib-3').height(Math.floor($col*2));

  if ($('body').hasClass('isotope-destroy')) {
    $('#mass-block').isotope('destroy');
  }

  $('#mass-block').isotope({
    masonry: {
      itemSelector : '.col-item',
      columnWidth: $col
    }
  });
  
  $('body').addClass('isotope-destroy');
}

columsSize();
$(window).resize(columsSize);

Answer the question

In order to leave comments, you need to log in

1 answer(s)
O
olol777, 2015-10-31
@olol777

Solved by deleting the line:

if ($('body').hasClass('isotope-destroy')) {		
    $('#mass-block').isotope('destroy');		
  }

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question