JQuery smooth scrolling on links that load ajax content

Question

I'm making a custom wordpress theme for my girfriend's blog. I gave more details on it in the question I asked earlier today here so I won't waste space by repeating it all again.

It's a single page website that uses jQuery smooth scrolling to navigate through content.

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;
});

I managed to make the links to individual posts load content into a div within the same page with Advanced AJAX Page Loader plugin, but the smooth scrolling does not work with these links. If I apply it to them they just refresh the page and load the single.php instead of smoothly transitioning to the div with the ajax loaded post content. Is there a way to apply smooth scrolling to these links?

Answer 1

I googled around and I managed to solve this. I added data-target="main-content" to post links in home.php and made a separate code for smooth-scrolling for these links.

<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');
});