Сделал поиск на странице, но не могу реализовать такую функцию когда пользователь нажимает на кнопку следующий товар, то чтобы экран скролился к товару, и чтобы товар был по центру экрана.
<div class="searchContend_h">
<div class="ui-grid-c">
<div class="ui-block-a">
<input name="text-12" id="text-12" value="" type="text" class="textSearchvalue_h">
</div>
<div class="ui-block-b"> <a href="#" data-role="button" data-corners="false" data-inline="true" class="searchButtonClickText_h">Search</a>
</div>
<div class="ui-block-c"> <a href="#" data-role="button" data-corners="false" data-inline="true" class="next_h">Next</a>
</div>
<div class="ui-block-d"> <a href="#" data-role="button" data-corners="false" data-inline="true" class="previous_h">Previous</a>
</div>
<div id="realTimeContents"> <div class="item-card">
<img class="item-image" src="img/598.jpg">
<div class="info-about-item">
<p>UN_80200Электронный модуль (аналог Ardo - 546 080 200)
</p>
<p class="price-item-card">уточнить цену</p>
<button>ччччччч</button>
</div>
</div>
<div class="item-card">
<img class="item-image" src="img/599.jpg">
<div class="info-about-item">
<p>UN_80800Электронный модуль (аналог Ardo - 546 080 800)
</p>
<p class="price-item-card">уточнить цену</p>
<button>ччччч</button>
</div>
</div>
<div class="item-card">
<img class="item-image" src="img/600.jpg">
<div class="info-about-item">
<p>UN_80900Электронный модуль (аналог Ardo - 546 080 900)
</p>
<p class="price-item-card">уточнить цену</p>
<button>чччччччч</button>
</div>
</div>
</div>
</div>
</div>
function searchAndHighlight(searchTerm, selector) {
if (searchTerm) {
var selector = selector || "#realTimeContents";
var searchTermRegEx = new RegExp(searchTerm, "ig");
var matches = $(selector).text().match(searchTermRegEx);
if (matches != null && matches.length > 0) {
$('.highlighted').removeClass('highlighted');
$span = $('#realTimeContents span');
$span.replaceWith($span.html());
if (searchTerm === "&") {
searchTerm = "&";
searchTermRegEx = new RegExp(searchTerm, "ig");
}
$(selector).html($(selector).html().replace(searchTermRegEx, "<span class='match'>" + searchTerm + "</span>"));
$('.match:first').addClass('highlighted');
var i = 0;
$('.next_h').off('click').on('click', function () {
i++;
if (i >= $('.match').length) i = 0;
$('.match').removeClass('highlighted');
$('.match').eq(i).addClass('highlighted');
$('.ui-mobile-viewport').animate({
scrollTop: $('.match').eq(i).offset().top
}, 300);
});
$('.previous_h').off('click').on('click', function () {
i--;
if (i < 0) i = $('.match').length - 1;
$('.match').removeClass('highlighted');
$('.match').eq(i).addClass('highlighted');
$('.ui-mobile-viewport').animate({
scrollTop: $('.match').eq(i).offset().top
}, 300);
});
if ($('.highlighted:first').length) {
$(window).scrollTop($('.highlighted:first').position().top);
}
return true;
}
}
return false;
}
$(document).on('click', '.searchButtonClickText_h', function (event) {
$(".highlighted").removeClass("highlighted").removeClass("match");
if (!searchAndHighlight($('.textSearchvalue_h').val())) {
alert("No results found");
}
});