JQuery在加載ajax內容的鏈接上平滑滾動

Question

我正在爲我的女朋友的博客製作自定義wordpress主題。我在今天早些時候提出的問題中給出了更多細節here，所以我不會浪費空間再重複一遍。

這是一個使用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; 
}); 

我設法使鏈接到個別職位加載內容與先進的AJAX頁面加載插件在同一頁內一個div，但平滑滾動不與這些環節的工作。如果我將它應用到他們，他們只刷新頁面並加載single.php，而不是順利過渡到與Ajax加載後的內容的div。有沒有辦法對這些鏈接應用平滑滾動？

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