使用Javascript创建“转到页面”按钮

Question

I am new to javascript, but 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

Thanks

Answer 1

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.

Answer 2

I suggest you have a good look at this page to find out how to ask a question here:

https://stackoverflow.com/help/how-to-ask

But to answer your question, something like this should suffice:

$(function() {
    $("form#goto input[type='submit']").click(function(e) {
        window.location = "#" + $("input[name=gotopage]").val();
        e.preventDefault();
    });
});

Answer 3

I would just use some jQuery to attach an event to your GO button... like so

$('input[type="submit"]').click(function () {
  var page = $('input[type="number"]').val();
  location.href = "index.html#" + page;
});

This captures the value in your input field, and then appends it to the URL specified, in addition to taking you to that location.