Кнопка "Показать еще" для компонента новостей Битрикс

Для этого нам потребуется сделать следующее:

Для начала делаем копию шаблона компонента system.pagenavigation

Называем наш новый шаблон "show_more", например и вставляем туда следующий код

<? if(!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED!==true)die(); $this->createFrame()->begin("Загрузка навигации"); ?>
<?if($arResult["NavPageCount"] > 1):?> 
   <?if ($arResult["NavPageNomer"]+1 
      <= $arResult["nEndPage"]):?> 
      <? $plus = $arResult["NavPageNomer"]+1; 
      $url = $arResult["sUrlPathParams"] . "PAGEN_".$arResult["NavNum"]."=".$plus; ?> 
      <div class="load_more" data-url="<?=$url?>"> Показать еще </div>
   <?else:?> 
      <div class="load_more"> Загружено все </div> 
   <?endif?> 
<?endif?>

В папке этого нового шаблона создаем файл script.js и вставляем в него следующий код

$(document).ready(function(){
    $(document).on('click', '.load_more', function(){

        var targetContainer = $('.news-list'),          //  Контейнер, в котором хранятся элементы
            url =  $('.load_more').attr('data-url');    //  URL, из которого будем брать элементы

        if (url !== undefined) {
            $.ajax({
                type: 'GET',
                url: url,
                dataType: 'html',
                success: function(data){

                    //  Удаляем старую навигацию
                    $('.load_more').remove();

                    var elements = $(data).find('.news-list'),  //  Ищем элементы
                        pagination = $(data).find('.load_more');//  Ищем навигацию

                    targetContainer.append(elements);   //  Добавляем посты в конец контейнера
                    targetContainer.append(pagination); //  добавляем навигацию следом

                }
            })
        }
    });
});

Стоит отметить что данный пример рассматривает стандартный шаблон и использует стандартные классы блоков.

Далее нам остается только в компоненте новостей или списка новостей выбрать нужный шаблон пагинации.