Задать вопрос

Как сделать скролл экрана к объекту чтобы он находился по центру?

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

<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 = "&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");
    }
});
  • Вопрос задан
  • 65 просмотров
Подписаться 1 Средний Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы