Как убрать рывок при показе новых элементов чрез ajax?

Question

[Дмитрий Грабко]

При клике на кнопку показать еще на страницу подгружаются новые карточки, но при этом страница скролится вверх.
Как можно оставить страницу на месте, после добавления товара на странице

$(document).on('click', '[data-show-more]', function(){
    var btn = $(this);
    var page = btn.attr('data-next-page');
    var id = btn.attr('data-show-more');
    var bx_ajax_id = btn.attr('data-ajax-id');
    var block_id = "#comp_"+bx_ajax_id;

    var data = {
        bxajaxid:bx_ajax_id,
        infinity:1
    };
    data['PAGEN_'+id] = page;

    $.ajax({
            type: "POST",
            url: window.location.href,
            data: data,
            timeout: 3000,
            success: function(data) {
                    $("#btn_"+bx_ajax_id).remove();
            $('[data-products]').append(data);
            //$('body').animate({ "scrollTop" : $('[data-index='+(page-1)+']').offset().top +280 }, 'slow');
            }
    });
});

Comments

[Владимир Скибин]

у Вас случайно такая кнопка?
<a href="#" data-show-more>Далее</a>
Сделайте в конце onclick - return false.

[Дмитрий Грабко]

Ссылка имеет такой вид:

<a data-ajax-id="<?=$bxajaxid?>" href="javascript:void(0)" data-show-more="<?=$arResult["NAV_RESULT"]->NavNum?>" data-next-page="<?=($arResult["NAV_RESULT"]->NavPageNomer + 1)?>" data-max-page="<?=$arResult["NAV_RESULT"]->nEndPage?>">Показать еще</a>

[Sergey Sidorov]

Просто в конце обработчика клика поставьте return false;

$(document).on('click', '[data-show-more]', function(){
    ...
return false;
});

[Дмитрий Грабко]

Sergey Sidorov, Не помогло :(

[Sergey Sidorov]

Дмитрий Грабко, Посмотрите, может у вас еще обработчик навешан на это событие? Попробуйте сделать так:

$(document).on('click', '[data-show-more]', function(e){
e.stopPropagation();
    ...
return false;
});

[Дмитрий Грабко]

Sergey Sidorov,

$(document).on('click', '[data-show-more]', function(e){
   	e.stopPropagation();
    var btn = $(this);
    var page = btn.attr('data-next-page');
    var id = btn.attr('data-show-more');
    var bx_ajax_id = btn.attr('data-ajax-id');
    var block_id = "#comp_"+bx_ajax_id;

    var data = {
        bxajaxid:bx_ajax_id,
        infinity:1
    };
    data['PAGEN_'+id] = page;

    $.ajax({
            type: "POST",
            url: window.location.href,
            data: data,
            timeout: 3000,
            success: function(data) {
                    $("#btn_"+bx_ajax_id).remove();
            $('[data-products]').append(data);
            //$('body').animate({ "scrollTop" : $('[data-index='+(page-1)+']').offset().top +280 }, 'slow');
            }
    });
    return false;
});

Результат тот же

[Sergey Sidorov]

Дмитрий Грабко, Попробуйте поставить в ссылку

href="return false;" вместо href="javascript:void(0)"

[Дмитрий Грабко]

Sergey Sidorov, Поменял но скролл остается

[Sergey Sidorov]

Дмитрий Грабко, Есть ли возможность показать рабочий пример?

[Дмитрий Грабко]

Sergey Sidorov, сайт

[Sergey Sidorov]

Дмитрий Грабко, Попробуйте устранить ошибки js, проблема может быть в этом take.ms/bZfj7 На первый взгляд все хорошо, обработчик у данной ссылки один и все должно работать как задумано.