How to make scrolling of the screen object so that it is in the center?

Did a search on the page, but I can't implement this function when the user presses the button following the item, then the screen scrolls to the product, and the product was at the center of the screen.

<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Электронный module (similar to LG - 546 080 200) 
</p>
 <p class="price-item-card">pricing</p>
<button>ccccccc</button>
</div>
 </div> 
 <div class="item-card">
 <img class="item-image" src="img/599.jpg">
 <div class="info-about-item">
 <p>UN_80800Электронный module (similar to LG - 546 080 800) 
</p>
 <p class="price-item-card">pricing</p>
<button>CCCCC</button>
</div>
 </div> 
 <div class="item-card">
 <img class="item-image" src="img/600.jpg">
 <div class="info-about-item">
 <p>UN_80900Электронный module (similar to LG - 546 080 900) 
</p>
 <p class="price-item-card">pricing</p>
<button>cccccccc</button>
</div>
 </div> 
</div>
</div>
</div>

searchAndHighlight function(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 = "&amp;";
 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");
}
});
March 19th 20 at 08:53
0 answer

Find more questions by tags jQueryJavaScript