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

Question

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

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

score 5 · Accepted Answer

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

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

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

location.href = '#S';

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

更新：由于.keypress()jQuery的函数只返回一个数字，而不是字符本身，你需要转换它。有关如何将字符转换为数字以及反之亦然的示例，请参阅在 Javascript 中将字符转换为 ASCII 代码。

score 0 · Accepted Answer

如果您正在寻找更快的东西，您可以执行以下技巧（我认为名称是有序的）。

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

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

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

score 0 · Accepted Answer

我认为您应该使用带有 id 的部分作为标签。然后从 jquery 做一个 $.scrollTop() 。

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

3 回答 3