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

Я делаю собственную тему 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. Есть ли способ применить плавную прокрутку к этим ссылкам?


wordpress jquery ajax smooth-scrolling
person Goran Tesic    schedule 15.04.2014    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Я погуглил, и мне удалось решить эту проблему. Я добавил 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');
});
person Goran Tesic    schedule 15.04.2014