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

Answer 2

如何在所需位置设置锚点，然后跳转到它？

<a name="someDiv">
<div><img ... ></div>

然后跳到它：

window.location.hash="someDiv";

它甚至可收藏！

Answer 3

我已经在另一篇帖子（Load Wordpress post Content into DIV using AJAX / JQUERY）解决了这个问题，该帖子专门针对使用基于Emanuele Feronato的post

的AJAX和JQUERY加载内容

滚动到单一帖子

3 个答案: