如果在键盘上按下名字的第一个字母，则滚动到网页上的人名

Question

我有一个包含大约500个名字的列表的页面。 用户想要输入例如键盘上有s，然后页面会自动滚动到以s开头的名称。

我应该将这些名称的第一个字母转换为INT，将该INT作为数据属性并将jQuery函数添加到页面中，还是有更好的解决方案？

Answer 1

我建议在div中使用适当的id嵌入每个字符的名称列表，例如以 S 开头的名称：

<div id="S">
  ... names with S ...
</div>

然后你可以使用jQuery对按键做出反应，然后做一个

location.href = '#S';

然后，浏览器将自动滚动到相应的div。这样做的另一个好处是你甚至可以使用URL将它放入你的收藏夹，所以如果你想直接跳到所有 S 的人，你可以轻松地做到这一点。

更新：由于jQuery的.keypress()函数只返回一个数字，而不是字符本身，因此需要转换它。有关如何将字符转换为数字的示例，请参阅Convert character to ASCII code in Javascript。

Answer 2

如果您正在寻找更快的东西，您可以执行以下操作（我假设名称已订购）。

您添加到具有特定字母id="letter_X"的第一个元素，并且当用户滚动时，您只需将id用作锚点（my_url#letter_X）。

这是我所知道的最快的方式，但只适用于一个字母。

PS：在html5中，锚点现在是元素ID，可以添加到任何html元素上。

Answer 3

我认为你应该使用带有id标记的部分。然后从jquery做一个$ .scrollTop（）。

$(window).scrollTop($('section#user_id').offset().top);