Clever Next and Previous Buttons in jQuery

Question

I have created a webpage which when you press 'down' automatically scrolls down to the next ID (a section which isn't visible due to overflow: hidden) When you press 'up' it scrolls back up.

At the moment each arrow simply tells the webpage to go to a specific div e.g. the 'down arrow' says

<a class="tab" href="#page">Down</a>

This is ok for just two pages however as I will be having more pages what I would like is to be able to specify the amount of pages and for the arrows to automatically change which link it needs to go to next.

For example, on page 1 the 'up arrow' is not visible and when you press the 'down arrow' it scrolls to #page2 whereupon the 'up arrow' is then visible. If you now press the down arrow again it will take you to #page3 whereupon it then becomes hidden as page 3 is the last page.

I'm guessing I need to create a 'var' which specifies the amount of pages and that to make the arrows invisible it will change the css property 'display' to none yet I don't know how to do this nor to make the links work out which number to go to next!

edit V2: (This is the current code having implemented help from your answer. I have partly managed to make the arrows appear and disappear with this code)

var PN = 1;
var PA = $('.page').length;

function checkArrows() {
    if(PN === 1) {
       $("#up_arrow").css({ "display": "none"});
    }else{
       $("#up_arrow").css({ "display": "block"});
    }
    if(PN === PA) {
      $("#down_arrow").css({"display": "none"});
    }else{
       $("#down_arrow").css({"display": "block"});
    }
}

$(document).ready(function(){
    checkArrows();
        $('.arrow').click(function(){
         var chk_arr =  $(this).hasClass('down_arrow') ? PN++ : PN--;
          checkArrows();
    });
});

For some reason var PA = $('.page').length; doesn't seem to return any values even though i have 2 occurrences of it in the HTML file.

In terms of scrolling this is a snippet of the code

$('#down_arrow').click(function () {

        $('a.arrow').removeClass('selected');
        $(this).addClass('selected');

        current = $(this);

        $('#wrapper').scrollTo($(this).attr("href"), 1000);     

        return false;
    });

and now am trying to find a way to update the "href" with PN + 1 or something so the href #page becomes #page2

as usual thanks so much!

Answer 1

jsBin DEMO

var PN = 1;
var PA = $('.box').length;
var Pos = 0;

function checkArrows() {
    if(PN === 1) {
       $("#up_arrow").css({ "display": "none"});
    }else{
       $("#up_arrow").css({ "display": "block"});
    }
    if(PN === PA) {
      $("#down_arrow").css({"display": "none"});
    }else{
       $("#down_arrow").css({"display": "block"});
    }
}
checkArrows();

function goTo(){
   checkArrows();
   Pos = $('.box').eq(PN-1).position().top;
  $('#scroller').stop().animate({top: '-'+Pos},1200);
}
goTo();


$('#up_arrow').click(function(){
      PN--;
      goTo();
});
$('#down_arrow').click(function(){
      PN++;
      goTo();
});

HTML (simplified):

  <div id="nav">
    <button id="up_arrow">UP</button><button id="down_arrow">DOWN</button>
  </div>
    
  <div id="container">
  <div id="scroller">
    
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>

  </div>
  </div>

CSS:

  #container{
    position:relative;
    background:#eee;
    width:300px;
    height:400px;
    overflow:hidden; 
  }
  
  .box{
    position:relative;
    color:#fff;
    background:#444;
    padding:20px;
    margin-bottom:10px;
  
  }
  
  #nav{
    position:fixed;
    left:320px;
    width:200px;
  }
  
  #scroller{
    position:absolute;
    top:0px;
  }
  button{
    cursor:pointer;
  }

---

HERE is a nice demo that will NOT hide the arrows! Check it out! ;)

And just another demo using scrollTop and with 1 less HTML element

Answer 2

Firstly a massive thanks to Roko for his answer, without it i couldn't have "trialled and error'ed" my way through! Secondly, I apologise as it's probably very basic stuff and because it is probably going to be very messy as it's the first javascript thing i've written/ tweaked. but okie doke here I go!

A variable is defined to determine what page number it is on, PN. A function then runs and hides the Up Arrow if on the first page, and hides the Down Arrow if on the last page. The last page is determined by a global variable (PA) in the current html file.

var PN = 1;

function checkArrows() {
    if (PN === 1) {
        $("#up_arrow").css({"display": "none"});
    } else {
        $("#up_arrow").css({"display": "block"});   
    }
    if (PN === PA) {
        $("#down_arrow").css({"display": "none"});

    } else {
        $("#down_arrow").css({"display": "block"});
    }
}

As the arrows remain on the page I needed them to automatically update their links depending on what page they were currently on. When the arrow is clicked it creates a variable for the page to go to based on it's current page (PN) +/- 1. This variable is then used as the ID to scroll to.

$(document).ready(function () {

    $('.up_arrow').click(function () {
        checkArrows();
        var gotopage = "#page" + (PN);          
        $('#wrapper').scrollTo(gotopage, 1000);     
        checkArrows();      
        return false;
    });

    $('.down_arrow').click(function () {
        checkArrows();
        var gotopage = "#page" + (PN);          
        $('#wrapper').scrollTo(gotopage, 1000);     
        checkArrows();      
        return false;
    });
});

This code below auto-scrolls to the page number it is currently on when the screen is resized as otherwise the other pages that are hidden slightly flow over due to the window change.

 function init() {
    $('#wrapper').scrollTo('#page1', 0)
    }

    function resizeGoTo() {
    var gotopage = "#page" + (PN);
    $('#wrapper').scrollTo(gotopage, 1000); 
}
    $(window).resize(function () {
        resizeGoTo();
});

EDIT: Was worried when moving from a 2 'page' file to more but just tried this with on a file with multiple (hidden) 'pages' and it worked!

EDIT v2: Have changed the code for the arrow presses. It used to get the link href in the html then update it based on the js calculations; now it doesn't bother and it just scrolls straight to the div gotten from the js calculations. Have also added auto-scroll for window re-size.

Thanks and hope I've done SO justice with my d.i.y answer!