Create "go to page" button using JavaScript

Issue

I have made an html page with 46 images on it which scroll horizontally. Each image is a different page of a magazine. Each image has an id of 1 through 46.

How can I use JavaScript to make this button be a link to the divs 1 through 46 and take the user to that # link when they press "Go"?

<form id="goto" name="gotoform">
    Go to Page: <input type="number" name="gotopage" min="1" max="46">
    <input type="submit" value="Go">
</form>

For example, if the user is on example.com/index.html and enters 6 and presses go, they will be taken to example.com/index.html#6

Solution

You can navigate to any id with the help of the anchor tag.

<input type="submit" value="Go" onclick="return jump();">

and then:

function jump(){
    location.href = "#"+<any prefix for the div ids>+document.getElementsByName("gotopage")[0].value;
}   

There's a jquery plugin just to do that in a fancy way - ScrollTo: http://demos.flesler.com/jquery/scrollTo/. It adds a nice little animation.

Answered By - gat