При клике на кнопку переход к якорю и открытие блока
 

Здравствуйте!
Прошу помощи.
На сайте в шапке есть форма фильтра с кнопкой

<button type="submit" class="goresult" >Подобрать кондиционер</button>

Результаты сортировки фильтра выводятся в блоке ниже
section class="selection,
до применения фильтра там выводятся все записи без сортировки

Задача такая.
Изначально блок с записями скрывать, при клике по кнопке submit надо блок отображать и поднимать его вверх (прокручивать экран).

Как пробовал.
Поставил якорь перед блоком
<a name="result"></a>
Во-первых якорь срабатывает только если кнопку button обернуть ссылкой на якорь и плюс к тому же поставить такую ссылку рядом, ее приходится скрывать.

<a href="#result"><button type="submit" class="goresult" >Подобрать кондиционер</button></a> 
<a style="opacity:0;" href="#result">дублирующая</a>

Во-вторых когда поставил скрипт который отображает блок с записями при клике на кнопку, исчез переход к якорю.

<script>
function resu() {
  $('.selection').hide();

  $('.goresult').click(function(event) {
    event.preventDefault(); // Для того чтобы при нажатии на ссылку не кидало вверх
    $('.selection').slideToggle();
  });
resu(); 
</script>

Как заставить все это работать вместе и одновременно?

Galyanov,

$('.selection').slideToggle()[0].scrollIntoView();

Спасибо!
Сделал вот так, только после прокрутки к блоку через несколько секунд блок опять исчезает и кидает наверх

<script>

$('.selection').hide();
$('.goresult').click(function(event) {
    $('.selection').slideToggle()[0].scrollIntoView();
  });

</script>

P.S.
А если повесить это событие не на клик кнопки?
У меня на странице есть код php который запускает функцию фильтрации если что то было передано из формы, может туда добавить как-то код?

<?php if ($_GET && !empty($_GET)) { // если было передано что-то из формы
             go_filter(); // запускаем функцию фильтрации
         } ?>

Galyanov,
кидает на верх значит либо форма перегружает страницу либо ссылка.
непонятно в чём проблема -- открыли блок -- взяли позицию блока, проскролили до блока если надо отменили событие по умолчанию.

Да, форма перегружает страницу, чего не было до установки скрипта.
Если скрипт убрать, то страница не перегружается.

Отменить событие всмысле убрать скрытие?
Вот этим preventDefault() ?

<script>
$('.selection').hide();
$('.goresult').click(function(event) {
    $('.selection').slideToggle()[0].scrollIntoView().preventDefault();
  });
</script>

все равно кидает наверх и блок скрывается

строка 6 первый ваш пост

Galyanov,
и зачем кнопку в ссылку оборачивать? -- и функция сортировки должна скролл делать в конце

Да, вот так заработало)
Однако при повторном нажатии на сабмит, блок скрывается...

<script>
$('.selection').hide();
$('.goresult').click(function(event) {
    event.preventDefault();
    $('.selection').slideToggle()[0].scrollIntoView();
    
  }); 
</script>

Т.е. по очереди, нажал - открылось, нажал закрылось.
А если повторно делать фильтрацию, как сделать чтобы уже открытое не закрывалось?

P.S. Обертыванеи я естественно уже убрал, раз функция есть)

Блин, я рано радуюсь...
Открывает и скролит это да, но выборка перестала работать, показывает все записи без фильтрации...

Galyanov,
так замените slideToggle на show

Galyanov,

$('.selection').show()[0].scrollIntoView();

это добавьте в скрипт сортировки и выкиньте скрипт с кликом

Если выкинуть скрипт с кликом то по какому событию будет срабатывать?

сделал так:

<script>
$('.selection').hide();

    event.preventDefault();
    $('.selection').show()[0].scrollIntoView();
  }); 
</script>

Блок не скрывает, вниз не опускает...
Как и без скрипта совсем.

Galyanov,

Сортировка у меня на php

function go_filter() { // наша функция
	$args = array(); // подготовим массив 
	$args['meta_query'] = array('relation' => 'AND'); // отношение между условиями, у нас это "И то И это", можно ИЛИ(OR)
	global $wp_query; // нужно заглобалить текущую выборку постов

	if (!empty($_GET['space'])) { // если передан массив с фильтром по комнатам
		$args['meta_query'][] = array( // пешем условия в meta_query
			'key' => 'space_num', // название произвольного поля
			'value' => $_GET['space'], // переданное значения, $_GET['rooms'] содержит массив со значениями отмеченных чекбоксов
			'type' => 'numeric', // тип поля - число
			'compare' => 'IN' // тип сравнения IN, т.е. значения поля комнат должно быть одним из значений элементов массива
			);
	}
    
    if (!empty($_GET['inverter'])) { // если передан массив с фильтром по комнатам
		$args['meta_query'][] = array( // пешем условия в meta_query
			'key' => 'inverter_num', // название произвольного поля
			'value' => $_GET['inverter'], // переданное значения, $_GET['rooms'] содержит массив со значениями отмеченных чекбоксов
			'type' => 'numeric', // тип поля - число
			'compare' => 'IN' // тип сравнения IN, т.е. значения поля комнат должно быть одним из значений элементов массива
			);
	}
    
    if (!empty($_GET['made'])) { // если передан массив с фильтром по комнатам
		$args['meta_query'][] = array( // пешем условия в meta_query
			'key' => 'made', // название произвольного поля
			'value' => $_GET['made'], // переданное значения, $_GET['rooms'] содержит массив со значениями отмеченных чекбоксов
			'type' => 'numeric', // тип поля - число
			'compare' => 'IN' // тип сравнения IN, т.е. значения поля комнат должно быть одним из значений элементов массива
			);
	}

	
			
	query_posts(array_merge($args,$wp_query->query)); // сшиваем текущие условия выборки стандартного цикла wp с новым массивом переданным из формы и фильтруем
}

Galyanov,
если сортировка происходит на сервере то перемещение к отсортированному блоку по клику ... как то мало совместимы ... нафига тогда грузить неотсортированную таблицу?

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

У меня все это происходит на одной странице. Одностраничный сайт.
И показывать все записи мне не надо, а только отсортированный результат...

Galyanov,
первоначально грузить блок с неотсортированной таблицей нет смысла в вашем случае -- грузите блок когда отсортируите ... нет блока не скрола к блоку , есть блок и есть скрол к блоку. всё мне больше добавить нечего.
вам к php специалисту.

Но в принципе можно сделать блок с нулевой высотой к которому будет скролить.

В общем сделал по другому.
При передаче данных из формы результаты выборки подгружаю из php файла, в которм стоит скрипт

<script>
$(window).load(function(){

$(window).scrollTop(1250);
	});
</script>

В итоге появляются данные и страница скролится сразу к результатам.