搜索并滚动到页面上的单词答案

【问题标题】：Search and scroll to word on page搜索并滚动到页面上的单词
【发布时间】：2014-04-24 15:23:19
【问题描述】：

我的客户想要在特定页面上添加一个搜索框，以允许他们的用户搜索产品，并且它会滚动到该文本。这样她就更容易将她的客户引导到页面的正确部分。

使用带有浏览器搜索功能的 Ctrl-F 很容易做到这一点。不幸的是，客户希望搜索成为网站的一部分。

关于如何做到这一点的任何建议？我一直在努力寻找一个 wordpress 插件，而我在互联网上使用的任何 JQuery 代码都失败了。

提前致谢！

【问题讨论】：

【解决方案1】：

不确定其浏览器是否支持，但您可以致电window.find("your query here") 使用浏览器的Ctrl+F 功能

【讨论】：

【解决方案2】：

你可以使用jQuery的:contains selector.

$("window").scrollTop($("*:contains('search text here'):eq(n)").offset().top);

n 是第 n 个匹配项。您可能可以先获取匹配数，然后按 Enter 或 Tab，然后滚动到 ++n-th 匹配。

【讨论】：

如何使这个 JQuery 位 wordpress 准备就绪？我想试一试，看看它是否有效。
您需要添加一个文本字段和一个在更改文本字段值时调用的函数。 `$("input#search").change(function(){ $("window").scrollTop($("*:contains('" + $("input#search").val() + "' ):eq(0)").offset().top); });
我将它添加到我的 JQuery 中，但它不起作用： function searchscroll() { $("input#search").change(function(){ $("window").scrollTop($ ("*:contains('" + $("input#search").val() + "'):eq(0)").offset().top); }); jQuery(document).ready(function () { jQuery(searchscroll); });
尝试 $(document) 代替 jQuery(document) 和 searchscroll() 代替 jQuwry(searchscroll)
对不起，你得把$("window").scrollTop($("*:contains('" + $("input#search").val() + "'):eq(0)").offset().top); });改成$("window").scrollTop($("*:contains('" + $("input#search").val() + "'):eq(0):last").offset().top); });