具有滚动的Wordpress主页的下一个/前一个动态按钮

Question

我有一个粘性的边菜单，我想有能够链接到下一个或上一篇文章在wordpress主索引页，根据您在文章行的位置。该功能将类似于该站点左侧的上下箭头(显然不是我的)：http://www.dbworks.pro/

我已经有了在页面上工作的Scrollto功能，这样我就可以链接到顶部和底部的嵌入式锚，然后它将滚动到它。我也已经设置了每个帖子，以便它提取帖子编号，并相应地设置包含div的id。

有什么方法可以让我得到前/下一个链接来识别我在页面上的哪个帖子，并计算出哪个是合适的div滚动到哪个呢？谢谢你的帮助。

--------------------------------------------------编辑

因此，我试图使这个脚本适应我的目的，我可以使所有的工作，除了移动的功能。元素在正确的时间隐藏并显示，如果在锚的onclick字段中放置了不同的javascript操作，则链接工作。唯一不能工作的是上一个和下一个项目滚动功能。下面是我一直在使用的Javascript：

<script type="text/javascript">
function goToProject(project_number) {
current = project_number;
var top = 0;
if (current == 0) {
  top = 0;
}
else {
  top = $(project_list[project_number]).offset().top - 86;
}
$.scrollTo(top, 500, 'linear');
}

function calcCoordinates() {    
project_list.each(function(i) {
  project_coordinates[i] = $(this).offset().top;
});
}

function calcCurrent() {
for (n=0; n<project_coordinates.length; n++) {
  if ($(window).scrollTop() >= (project_coordinates[n] - 90)) {
    current = n;
  }
  else {
    break;
    }
  }
}

$(document).ready(function() {

project_list = $('.post-container');
project_coordinates = Array();
current = 0;

calcCoordinates();

$('#top-link').hide();
$('#previous-link').hide();
$('#next-link').hide();
$('#bottom-link').hide();
});


$(window).scroll(function() {
calcCurrent();

if ($(window).scrollTop() > 1000) {
  $("#menu").css({ "display": "block" });
  $('#top-link').fadeIn('100');
  $('#previous-link').fadeIn('100');
  $('#next-link').fadeIn('100');
  $('#bottom-link').fadeIn('100');
}
else {
  $('#top-link').fadeOut('100');
  $('#previous-link').fadeOut('100');
  $('#next-link').fadeOut('100');
  $('#bottom-link').fadeOut('100');
}

});

$(window).resize(function() {
calcCoordinates();
calcCurrent();
});
</script>

下面是我对应的HTML：

<ul id="menu">
<li><a id="top-link" href="#firstpost"><h4>Top</h4></a></li>

<li><a id="previous-link" onclick="if (current > 0) { goToProject(current-1); } return false;"><h4>Previous</h4></a></li>

<li><a id="next-link" onclick="if (current < project_list.length - 1) { goToProject(current+1); } return false;"><h4>Next</h4></a></li>

<li><a id="bottom-link" href="#sidebar"><h4>Bottom</h4></a></li>

</ul>  

每个帖子也被标记为class=“post容器”。对为什么这不管用有什么想法吗？再次，我已经从另一个网站为我的目的调整了这个。。。因此，可能有一些遗留的值，我不知道我需要改变。

Answer 1

弄明白了。它不理解scrollTo()函数，所以我只需要定义它:) http://flesler.blogspot.com/2007/10/jqueryscrollto.html