При отправке AJAX запроса через jquery происходит scroll top, как этого избежать?

Question

Делаю фильтр по товарам. AJAX посылает данные в PHP-файл, который затем дает необходимые данные. Все это происходит без нажатия на кнопку (так как в интернете видел, что часто проблема скролла вверх из-за нахождения js в href ссылок).

Так выглядит html самого фильтра:

<div class="list-group">
                    <h3>Цена</h3>
                        <input type="hidden" id="hidden_minimum_price" value="0" />
                        <input type="hidden" id="hidden_maximum_price" value="65000" />
                    <p id="price_show">1000 - 65000</p>
                    <div id="price_range"></div>
               </div>    


               <div class="list-group">
                    <h3>Бренд</h3>
                    <?php
                    $query = "SELECT DISTINCT(brand) FROM tovar";
                    $statement = $db->prepare($query);
                    $statement->execute();
                    $result = $statement->fetchAll();
                    foreach($result as $row) {
                    ?>
                         <div class="list-group-item checkbox">
                              <label>
                                   <input type="checkbox" class="common_selector brand" value="<?php echo $row['brand']; ?>"  > 
                                   <?php echo $row['brand']; ?>
                              </label>
                         </div>
                    <?php } ?>

               </div>

Этот код отправляет данные. Находится внизу страницы html:

$(document).ready(function(){

    filter_data();

    function filter_data()
    {
        $('.filter_data').html('<div id="loading" style="" ></div>');
        var action = 'fetch_data';
        var minimum_price = $('#hidden_minimum_price').val();
        var maximum_price = $('#hidden_maximum_price').val();
        var brand = get_filter('brand');
        var color = get_filter('color');

        $.ajax({
            url:"tovar.php",
            method:"POST",
            data:{action:action, minimum_price:minimum_price, maximum_price:maximum_price, brand:brand, color:color},
            success:function(data){
                $('.filter_data').html(data);
            }
        });
    }

    function get_filter(class_name)
    {
        var filter = [];
        $('.'+class_name+':checked').each(function(){
            filter.push($(this).val());
        });
        return filter;
    }

    $('.common_selector').click(function(){
        filter_data();
    });


    $('#price_range').slider({
        range:true,
        min:1000,
        max:65000,
        values:[1000, 65000],
        step:500,
        stop:function(event, ui)
        {
            $('#price_show').html(ui.values[0] + ' - ' + ui.values[1]);
            $('#hidden_minimum_price').val(ui.values[0]);
            $('#hidden_maximum_price').val(ui.values[1]);
            filter_data();
        }
    });

});

Все что подключено к файлу - это jquery, jquery-ui(для ползунка) и все. Из-за чего происходит скролл вверх, не могу понять, так как сам в ajax, js, jquery совсем плох. Пример php файла, я думаю, ни к чему. Буду рад любой помощи, спасибо

Answer 1

Проблема была в том, что необходима фиксированная заданная высота блоку, в который приходят данные, отправленные ajax'ом. В моем случае - filter_data.

Ни min-height, ни max-height не работают, блок все равно скачет вверх. Необходимо задать именно height

БЛОГ НА HUSL

При отправке AJAX запроса через jquery происходит scroll top, как этого избежать?

Ответы (1 шт):