Question

我正在为我的girfriend博客制作一个自定义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

我google了一下，我设法解决了这个问题。我添加了data-target =＆＃34; main-content＆＃34;在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');
});

JQuery在加载ajax内容的链接上平滑滚动

1 个答案: