I am working on a scrolling site for my company and we are using SerialScroll to accomplish the scrolling. Frustratingly I cannot for the life of me find a good way to implement a Back Button and even though the user experience does not require it to function, My boss had a terrible experience with a previous contracted developer who took a year, A YEAR to fix the back button on the last site. So they are unwilling to even listen to me on this issue.
serialScroll uses a constant variable for the postion, my thinking, naive as it may be, would be to find a way to update that position variable from outside the serialScroll function. That way when the back button is clicked, I can update the serialScroll position??? I cannot for the life of me find a solution or if it's even possible? Any help would be greatly greatly appreciated.
Here's my current function:
$(function(){
var next_btn = $('#sec0_nav a.next');
var prev_btn = $('#sec0_nav a.prev').hide();
$('#wrapper').serialScroll({
target:'#sec',
items:'.prod_list',
prev: prev_btn,
next: next_btn,
axis:'x',
navigation:'#prod_nav li a',
duration:500,
force:true,
cylce: false,
onBefore:function( e, elem, $pane, $items, pos ){
prev_btn.add(next_btn).show();
if( pos == 0 )prev_btn.hide();
else if( pos == $items.length -1 )
next_btn.hide();
$('.prod_list').removeClass('current');
},//end onBefore
onAfter:function(elem) {
var posPlace = (elem).id;
location.hash = posPlace;
$(elem).addClass('current');
}//End onAfter
});//end serialScroll
});