pjax - кнопки вперед и назад. Принудительно перезагрузить всю страницу?

Question

Я довольно новый с ajax и историческими состояниями. И сейчас я делаю этот сайт, где я загружаю сообщения в блоге с помощью pjax. Что-то вроде переходов codrops среднего стиля. Поскольку я воссоздал тот же эффект и не использовал ни одного кода codrop, я не могу заставить работать кнопки "назад" и "вперед". Или, может быть, я настроил события все неправильно. Или вообще думал, что все это неправильно.

// Function to refresh the .current and .next elements
function refreshSelectors(){
    $blogpost_current = $('.current');
    $blogpost_next = $('.next');
};


$_(document).on("click", "*[data-pjax]", function(e) {
    e.preventDefault();

    // Get url
    var href = $(this).attr('href');

    // Fade out current post
    $blogpost_current.addClass('fade-up-out');

    // Get the difference in height between .next and top of window
    var translateValue = $blogpost_next.get(0).getBoundingClientRect().top;

    // Add easing class on .next to move it to the top.
    $blogpost_next.addClass('easing-upward').css({"transform": "translate3d(0, -" + translateValue + "px, 0"});

    // Remove .next class and set it as current
    $blogpost_next.removeClass('next').addClass('current');

    // After 450ms
    setTimeout(function(){
        // Remove old .current post
        $blogpost_current.remove();

        // Remove easing-upward class on .next
        $blogpost_next.removeClass('easing-upward');

        // Snap it in place
        $blogpost_next.css({"transform": ""});

        // Scroll to top
        $body.scrollTop(0);
        $html.scrollTop(0);

        // Refersh selectorer
        refreshSelectors();

        // Create new .next section, to fill the ajax content into
        $blogpost_current.after('<section class="page next"></section>')

        // Refersh selectorer
        refreshSelectors();

        // Make the pjax call
        $.pjax({url: href, container: $blogpost_next, fragment: ".next", timeout: 2000});

    }, 450)
});

Таким образом, как текущая, так и последующие записи изначально загружаются на страницу. И содержание внутри .next скрыт. И виден только когда класс изменен на .current, Обратите внимание, что только когда анимация завершена, новый .next создается и заполняется pjax. Может быть, я должен был использовать другие события вместо этого? И этот таймер там, возможно, мог быть вставлен в фактическое событие или?

Или, может быть, проще всего иметь кнопки "назад" и "вперед" для перезагрузки страницы.

$(document).on('pjax:popstate', function(event) { 
    location.reload();
});

Какое будет лучшее решение? Правильно ли это обрабатывается pjax? Или мне нужно слушать событие popstate, чтобы получить правильный контент? А возможно оживить это наоборот?