Question

I have a sticky side menu that I would like to have be able to link to the next or previous post on the wordpress main index page, based on where you are in the line of posts. The functionality would be similar to the up and down arrows on the left side of this site (clearly not mine): http://www.dbworks.pro/

I already have the Scrollto functionality working on the page so that I can link to an embedded anchor at the top and bottom and it’ll scroll to it. I also have already set up each post so that it pulls the post number and sets the containing div’s id accordingly.

Is there some way that I can get the previous / next links to recognize which post I’m at on the page and calculate which would be the appropriate div to scroll to? Thanks for your help.

— Edit ————————————————–

So I’m attempting to adapt this script for my purposes and I can get everything to work apart from the movement functionality. The elements hide and show at the correct times and the links work if a different javascript action is put in place in the onclick field of the anchor. The only thing that I can’t get to work is the previous and next project scroll functionality. Here is the Javascript I’ve been working with:

<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>

And here is my corresponding 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>  

Each post is also labeled with class=”post-container”. Any thoughts as to why this wouldn’t be working? Again, I’ve adapted this for my purposes from another site . . . so there may be some legacy values that I don’t know I’d need to change.

Answer 1

Figured it out. It wasn’t understanding the scrollTo() function so I just had to define it 🙂
http://flesler.blogspot.com/2007/10/jqueryscrollto.html