搜索並滾動到頁面上的文字

我的客戶希望在特定頁面上添加一個搜索框，以允許用戶搜索產品，並且它將滾動到該文本。這樣她就可以更容易地將她的客戶引導到頁面的正確部分。搜索並滾動到頁面上的文字

這很容易通過使用帶瀏覽器搜索功能的Ctrl-F來完成。不幸的是，客戶希望搜索成爲網站的一部分。

有關如何完成此任務的任何建議？我一直在努力尋找一個WordPress插件，我在互聯網上使用的任何JQuery代碼都讓我失望。

非常感謝提前！

來源

2014-03-18 user40823

我認爲這個問題已經被問： http://stackoverflow.com/questions/6677035/jquery-scroll-to-element – Hoff

此人希望它滾動到某個詞的頁面，而不是上元件。 – DNACode

不清楚它的瀏覽器支持，但你可以叫window.find("your query here")使用瀏覽器的按Ctrl + F功能

More info here

來源

2014-03-18 18:36:08 kei

是啊！這是一個最簡單的方法（並帶有高亮文本）自動使用瀏覽器 – MrMins

您可以使用jQuery的:contains selector.

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

其中n是第n -比賽。您可以先獲得比賽數量，然後按輸入或選項卡，然後滾動至++n-第一場比賽。

來源

2014-03-18 18:38:10

如何讓這個JQuery位wordpress準備好？我想嘗試一下，看看它是否有效。 – user40823

您需要添加一個文本字段和一個在文本字段值被更改時調用的函數。 $（「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（searchscroll）; }）; – user40823

搜索並滾動到頁面上的文字

回答

相關問題