Answer the question
In order to leave comments, you need to log in
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;
});
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
Didn't find what you were looking for?
Ask your questionAsk a Question
731 491 924 answers to any question