JQuery плавная прокрутка по ссылкам, которые загружают контент AJAX

Question

Я делаю собственную тему WordPress для блога моей подруги. Я дал более подробную информацию по этому вопросу в вопросе, который я задал ранее сегодня здесь, чтобы не тратить пространство, повторяя все это снова.

Это одностраничный веб-сайт, который использует плавную прокрутку jQuery для навигации по контенту.

var $root = $('html, body');
$('nav a, .catlist-link').click(function() {
    var href = $.attr(this, 'href');
    $root.animate({
        scrollTop: $(href).offset().top
    }, 1300, 'easeInOutCubic', function () {
        window.location.hash = href;
    });
    return false;
});

Мне удалось заставить ссылки на отдельные посты загружать контент в div на одной странице с плагином Advanced AJAX Page Loader, но плавная прокрутка не работает с этими ссылками. Если я применяю его к ним, они просто обновляют страницу и загружают файл single.php вместо плавного перехода к div с загруженным содержимым ajax. Есть ли способ применить плавную прокрутку к этим ссылкам?

Answer 1

Я погуглил вокруг, и мне удалось решить это. Я добавил data-target="main-content" для публикации ссылок в home.php и сделал отдельный код для плавной прокрутки этих ссылок.

<li class="slide">
    <a data-target="main-content" href="<?php echo get_permalink(); ?>">
        <?php the_post_thumbnail(); ?>
        <div class="bubble">
            <h5><?php echo get_the_title(); ?></h5>
        </div>
    </a>
</li>

JQuery:

$('.slide a').on('click', function(event) {
    event.preventDefault();
    var target = "#" + $(this).data('target');
    $('html, body').animate({
        scrollTop: $(target).offset().top
    }, 1300, 'easeInOutCubic');
});