jquery - 滚动到单个帖子

Question

我目前正在 Wordpress 上开发一个网站，它需要类似流畅的单页布局。

为索引、单个帖子和类别页面开发自定义模板是一件轻而易举的事，但是以用户单击帖子并且站点向下滚动以显示单个帖子自定义模板的方式实现它却并非易事。

这是演示此功能的引用站点 - Nike Free Voice .基本上发生的情况是，如果您单击图片，网站将向下滚动以显示实际的文章/帖子。

我假设最合适的方法是使用 AJAX 将内容加载到 DIV 中，然后让 JQUERY 将页面向下滚动到该特定的 DIV。这里的问题是:我该怎么做？

我也考虑过向下滚动到 IFRAME，但将 IFRAME 源定位到 single.php 文件或实际的永久链接将不起作用 - 对前者这样做只会呈现错误，而对后者这样做将意味着加载的内容不是动态的，因为它是指向永久链接的绝对链接。

真的希望周围的人知道从哪里开始。

提前谢谢大家!

PS:我没有发布任何示例代码，因为 Wordpress 的基础架构非常标准。这实际上只是加载正确的单个帖子内容然后滚动到它的问题。

Answer 1

这个函数接受一个目标元素，它应该是包含帖子的 div 和一个持续时间，如果你想为滚动设置动画的话。

function scrollToElement(element, duration){
 var verticalScrollTarget = element.offset().top;
 if(typeof duration == 'undefined'){
    $('html,body').scrollTop(verticalScrollTarget);
  }else{
    $(($('html').scrollTop() != 0 ? 'html':'body')).animate({scrollTop: verticalScrollTarget}, duration)
  }
}

例子:

    $.ajax({ 
      url: '/someurl',
      success : function(response){
         var target = $('div',response);
         $('#somePostList').append(response);
         scrollToElement(target, 1000);
      });