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-container”。有什么想法，为什么这不起作用？再次，我已经从另一个网站为我的目的调整了这个。。。所以可能会有一些我不知道需要改变的遗留价值。

Answer 1

想出来。它不理解scrollTo（）函数所以我只需要定义它:) http://flesler.blogspot.com/2007/10/jqueryscrollto.html

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

1 个答案: