Как сделать проверку ссылки после хэш(#) на js?

Question

[Антон]

На lp есть сортировка товаров на плагине MixItUp(на js). Есть кусок кода для активации определенного фильтра при переходе по ссылке с якорем с внешнего сайта. Сам якорь содержит название фильтра
Если же перейти на сайт с использованием любой другой якорной ссылке(любой, которая не является названием фильтра) то не выбирается не один фильтр и блок остается пустым.

Подскажите как можно выполнить условие:
если часть текста идущая после # в ссылке окна браузера == фильтр1 || фильтр2|| ... || филтр 5, то активируется фильтр которому она равна,
иначе активируется фильтр "Все товары"

$(function(){
	// check if there is a url hash, and if so, 
	// save it as a variable and prepend a '.' to the start - e.g. '.blue'
	// else, set variable as the default "all"

	var filterOnLoad = window.location.hash ? '.'+(window.location.hash).replace('#','') : 'all';

	// Send variable to MixItUp on instantiation:
	
		 $('#Container').mixItUp({
		load: {
			filter: filterOnLoad,
		},
		});
	});

Answer 1

[Stalker_RED]

//например так
switch (location.hash) {
    case '#phone':
        filter = 4;
        break;
    case '#notebook':
        filter = 7;
        break;
    case '#toys':
        filter = 135;
        break;
    default:
	    filter = 0;
	    location.hash = '#default_anchor'
}

Comments

[Карл Майнхофф]

Stalker_RED, вы не учли, что location.hash отдает строку вместе с символом хеша(#)

[Антон]

Stalker_RED:, c пасибо. Ваш способ подошёл как нельзя лучше! Но есть одна маленькая-проблемка:

Если же перейти на сайт с использованием любой другой якорной ссылке(любой, которая не является названием фильтра и стоит ниже контейнера с фильтрами) то...

экран перестает прокручиваться до нужного якоря(останавливается в конце контейнера с фильтрами). Можно это как то решить без очень жесткого и не громоздкого кода?
Мне вполне хватает такого уровня работоспособности скрипта, но если решение нагрузит сайт (до ~+200ms) загрузки, то почему бы и не решить его.

[Stalker_RED]

Карл Кремень:
Ой. отредактировал ответ.

Антон:
>>любой другой якорной ссылке
сработает правило default.
можно там-же добавить переход на якорь по умолчанию.
location.href = '#default_anchor'

https://jsfiddle.net/rbzwpz2j/1/embedded/result/

[Антон]

Stalker_RED , данное выражение

location.href = '#default_anchor'

сработало в вашем примере. Но в моем случае переход к якорю не срабатывает, даже если я указываю location.href = '#contact'. И проблема только с якорями которые ниже контейнера с фильтрами.

$(function(){
	// check if there is a url hash, and if so, 
	// save it as a variable and prepend a '.' to the start - e.g. '.blue'
	// else, set variable as the default "all"

	var filterOnLoad = window.location.hash ? '.'+(window.location.hash).replace('#','') : 'all';
	//
	switch (filterOnLoad) {
		case '.rr':
			filterOnLoadSwitch = '.rr';
			break;
		case '.ro':
			filterOnLoadSwitch = '.ro';
			break;
		case '.o':
			filterOnLoadSwitch = '.o';
			break;
		default:
			filterOnLoadSwitch = 'all';
			location.href = location.hash
	}

	// Send variable to MixItUp on instantiation:
	
		 $('#Container').mixItUp({
		load: {
			filter: filterOnLoadSwitch,
			sort: 'price:asc'
		},
		animation: {
			effects: 'fade',
		},
		});
	});

[Stalker_RED]

Антон: Извините, похоже я опечатался, когда написал в примере location.href

На jsfiddle я использовал location.hash = '#default_anchor' потому оно и работает :)

[Антон]

Stalker_RED: сам плагин с вашим дополнением(проверкой) и без данной строки кода location.href = '#default_anchor'
отправляет на главную страницу(отмечая все категории дефолтно) или ссылку с якорем до контейнера с фильтрами.
Я не МЕГА профессионал JS. Я думаю, это из-за break не происходит скроллинг к якорям которые стоят после блоков с фильтрами. Такое возможно? Может какую-то функцию написать, чтоб брал location.hash и скроллил к элементу с атрибутом name="#содержайщийЭтотХэш", после проверки switch'ом

[Stalker_RED]

В данном случае break действует только внутри блока case. Без break сработают ВСЁ что ниже подходящего условия.

Но ведь браузер и без скриптов должен скроллить к нужному якорю. Можно вообще убрать этот default, чтобы обработка срабатывала только на ваши фильтры, а остальное проходило без изменений.