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

Create "go to page" button using Javascript

本文关键字：转到页面 按钮 Javascript 创建 使用      更新时间：2023-09-26

我是javascript的新手，但制作了一个html页面，上面有46张水平滚动的图像。每张图片都是杂志的不同页面。每个图像的 id 为 1 到 46。

如何使用 javascript 使此按钮成为指向divs 1 到 46 的链接，并在用户按"Go"时将用户带到该 # 链接？

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

例如，如果用户在 example.com/index.html 上并输入 6 并按 go，他们将被带到 example.com/index.html#6

谢谢

您可以在锚

标记的帮助下导航到任何 id。

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

然后：

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

有一个jquery插件只是以一种奇特的方式做到这一点 - ScrollTo：http://demos.flesler.com/jquery/scrollTo/。它添加了一个漂亮的小动画。

我只会使用一些jQuery将事件附加到您的GO按钮... 这样

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

这将捕获输入字段中的值，然后将其附加到指定的 URL，此外还会将您带到该位置。

我建议你好好看看这个页面，了解如何在这里提问：

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

但是要回答您的问题，这样的事情就足够了：

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