HTML5/jQuery - 页面滚动到输入值答案

【问题标题】：HTML5/jQuery - Page Scroll to Input ValueHTML5/jQuery - 页面滚动到输入值
【发布时间】：2012-12-15 23:19:53
【问题描述】：

我有一个图像文档阅读器，标题中有一个 input[number] 字段。这个想法是用户可以输入他们想要查看的页面（图像），页面将平滑地向下滚动到适当的 div。这是我的代码：

<div class="score-header">
    <section class="nav">
        <input type="number" id="page" />
    </section>    
</div>

文档的页面显示在自己的 div 中，如下所示：

<div class="page-one">
    <img src="page1.jpg" alt="" />
</div>
<div class="page-two">
    <img src="page1.jpg" alt="" />
</div>

有没有一种方法，当用户插入数字并点击回车或按钮时，网页会向下滚动文档的相应页面。

注意标题通过 jQuery 始终粘在网页顶部

【问题讨论】：

为什么让用户输入一个值而不是他们可以点击或触摸的东西？看起来不太友好，而且您需要验证他们输入的任何内容
...通过选择下拉菜单更简单...？
这些解决方案的问题在于，如果有 65 页，那你就完蛋了……

标签： javascript jquery html forms input

【解决方案1】：

这样的？

$(document).ready(function(){

$('#page').change(function() {
    $("page-div").eq($("#page").val()-1);
    //this selector takes the input value and subtracts 1 because the count starts in 0 so it will select the corect div ....

    //i do not know how to scroll down.... i tryed this but did not work.... you need scroll to the possition of the selected div
    $("#page-one").animate({scrollTop: $("#page-one").offset().top});
});

});

http://jsfiddle.net/ukjvS/13/

http://jsfiddle.net/ukjvS/13/show

（阅读 cmets）

如果可能的话回答我的问题:)

HTML & CSS blogger side menu?

【讨论】：