带有 Scrollto 的 Wordpress 主页的动态下一个/上一个按钮答案

【问题标题】：Dynamic next/previous button for Wordpress main page with Scrollto带有 Scrollto 的 Wordpress 主页的动态下一个/上一个按钮
【发布时间】：2011-08-30 05:16:58
【问题描述】：

我有一个粘性侧边菜单，我希望能够根据您在帖子行中的位置链接到 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-container"。关于为什么这不起作用的任何想法？再次，我已经从另一个站点为我的目的改编了这个。 . .所以可能有一些我不知道我需要改变的遗留值。

【问题讨论】：

标签： javascript jquery wordpress

【解决方案1】：

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

【讨论】：