- Корректно отображается при любом количестве страниц (до 10000 и более);
- Работает не только в топике, но и на странице форумов, личных сообщений, в поиске;
- Пагинатор работает вверху и внизу страницы, вместо стандартной пагинации
- Имеется оранжевый маркер текущей страницы (см.скрин), при клике на который пагинатор возвращается в исходное положение
- Корректно работает во всех современных браузерах, включая мобильные

В HTML верх:

Скрытый текст:

Для просмотра скрытого текста - войдите или зарегистрируйтесь.

Стиль:

Код:

#post-form h2 {
    position: relative;
}
#post-form #prev-next { /*Блок с кнопками*/
    top: -1px;
    right: 1px;
    position: absolute;
    height: 32px;
    width: 68px;
    background: url(/files/001a/fc/23/28037.png) no-repeat 0 0; /*Кнопки(фоном)*/
}

#prev-next a {  /*Стиль ссылок над кнопками(фоном)*/
    display: inline-block;
    height: 100%;
    width: 50%;
}

#prev-next div[class^="None"] { /*Закрывашки при отсутствии предыдущей или следущей страницы*/
    top: 0;
    display: inline-block;
    z-index: -1;
    position: absolute;
    height: 100%;
    width: 50%;
    background: url(/files/001a/fc/23/65177.png) no-repeat center;
    background-size: 22px;
}

#prev-next div.None-next {
    right: 0;
}

#prev-next div.bad {  /*Приподнять закрывашку при отсуствии страницы над ссылкой*/
    z-index: 100;
}

HTML верх:

Код:

<!-------------------- Кнопки Следующая/Предыдущая Страница------------------------>
<script type="text/javascript">
$().pun_mainReady(function(){if($('#pun-viewtopic #post').length == 0)return;
var a1 = $('.linksb .pagelink a.prev');
var a2 = $('.linksb .pagelink a.next');

var $b = $('<div id="prev-next"><div class="None-prev" title="Oтсутствует"></div><a title="Предыдущая"></a><a title="Следущая"></a><div class="None-next" title="Oтсутствует"></div><div>'); $b.appendTo('#post-form h2');

if(a1.length)$('#prev-next a:first')[0].href = a1[0].href; else $('#prev-next div.None-prev').addClass('bad');
if(a2.length)$('#prev-next a:last')[0].href = a2[0].href; else $('#prev-next div.None-next').addClass('bad');

$('#prev-next div').tipsy({fade: true, gravity: 's'});$('#prev-next a').tipsy({fade: true, gravity: 'n'});
});
</script>

В НТМЛ низ:

Скрытый текст:

Для просмотра скрытого текста - войдите или зарегистрируйтесь.

В HTML низ:

Скрытый текст:

Для просмотра скрытого текста - войдите или зарегистрируйтесь.

Красным выделена ссылка на картинку стрелки.

Вариант картинки для форумов с темным фоном:
Ссылка: https://forumstatic.ru/files/0015/92/70/21719.png

---

Версия скрипта для перехода ТОЛЬКО по страницам топика

Скрытый текст:

Для просмотра скрытого текста - войдите или зарегистрируйтесь.