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="#page2">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: Just botched together some code which hides the arrows based on the page number however still need to work out how to update the variables and change the links the arrows go to.

(please exclude the coding, it's my first time trying to write script as opposed to just editing plugins!)

var PageNumber = 1;
var PageAmount = 2;

function getPageNumber() {

}

function hideUpArrow() {
    if(PageNumber==1) {
    $("#up_arrow").css({
            "display": "none"
        });
    }
}

function hideDownArrow() {
    if(PageNumber==PageAmount) {
    $("#down_arrow").css({
            "display": "none"
        });
    }
}

$(document).ready(function(){
        hideUpArrow();
});