Нужен код JQuery или javascript для прокрутки к 1-му результату после поиска по странице с помощью метода Вектор () - PullRequest
Новая
       38

Нужен код JQuery или javascript для прокрутки к 1-му результату после поиска по странице с помощью метода Вектор ()

0 голосов
/ 07 июля 2011

У меня есть страница поиска в разработке здесь на вкладке Содержание: http://www.vpgmarketresearch.com/tabs.html. Я ищу способ прокрутки окна до первого результата, найденного в результате поиска. Например, если вы ищете "Испания", то найдется 109 результатов. Я бы хотел привести пользователя к первому.

Я прочитал все подобные вопросы, ничего не значило.

Вы можете увидеть весь код, просмотрев источник. Не обращайте внимания на уродливый встроенный CSS для этой очень большой страницы. Это временно.

Вот код, который содержит «содержит», и я думаю, что это то, что нужно настроить: 

$('div.TabbedPanelsContent :contains("'+term+'")').each(function(){  
$(this).html($(this).html().replace(new RegExp(term,'g'), '<span class="highlight">'+term+'</span>'));  
$(this).find('span.highlight').fadeIn("slow");

Вот где я получил этот код поиска: http://www.ryancoughlin.com/2008/12/20/jquery-search-and-highlight/

Любая помощь будет принята с благодарностью!

Ответы [ 2 ]

2 голосов
/ 07 июля 2011

Я жестко закодировал этот термин, поэтому замените его собственной реализацией: 

var term = 'Encephalitis';

$('div.TabbedPanelsContent :contains("'+term+'")').each(function(){ 
  $(this).html($(this).html().replace(new RegExp(term,'g'), '<span class="highlight">'+term+'</span>'));  
  $(this).find('span.highlight').fadeIn("slow"); var offset = $(this).offset().top;
  $('html,body').animate({
    scrollTop: offset
  }, 100);
  return false;
});

Вы можете отрегулировать задержку в 100 мс на большую или меньшую. Возвращаемое значение false важно, поскольку оно ломает итератор. Если вы этого не сделаете, страница будет прокручиваться к каждому совпадению термина вместо первого найденного.

1 голос
/ 07 июля 2011

Вы можете сделать это с помощью плавного плавного перехода, подобного этому: 

$("html, body").animate({ scrollTop: 0 }, "slow");

При этом будет прокручиваться верхняя часть страницы (0 - это y-координата верхней части)

Чтобы перейти к первому результату, вы можете заменить 0: 

$("html, body").animate({ scrollTop: $("#first_result").offset().top }, "slow");

Или вы можете использовать плагин scrollTo .

Надеюсь, это поможет. Приветствия

...