Dark19

Сделал через localStorage, мне показалось наиболее удобным и легким решением. Привожу свой код:

$('.js-post-filter').on('click',function(e){
        e.preventDefault();
        var curFilter = $(this).data('filter'),
            guidesPage = site_url+"/guides";
        localStorage.setItem("singleFilter",curFilter);
        window.location.href = guidesPage;
    });

    $(window).on('load',function () {
        var singleFilter = localStorage.getItem("singleFilter");
        if (singleFilter !== null){
            tags.each(function () {
                if($(this).data('filter') === singleFilter) {
                    $(this).trigger('click');
                }
            });
            localStorage.clear();
        }

    });

js-post-filter

- кнопка фильтра на странице single-guides.php, при нажатии берем значение её data атрибута(это значение фильтра по которому происходит сортировка).

site_url+"/guides"

- урл сайта + название страницы в адресной строке на которую нужно передать значение.

localStorage.setItem("singleFilter",curFilter);

- передаем значение на другую страницу под названием

singleFilter

.

window.location.href = guidesPage;

- делаем перенаправление на нужную страницу.
В моем случае понадобилось событие

onload

так как по другому не успевало подхватится переданное значение.
Дальше в переменную

singleFilter

записываем переданное значение и проверяем есть ли оно вообще (проверка null).

tags

- наши кнопки фильтра на странице guides.php. Проходимся по ним циклом и ищем есть ли там совпадение с переданным значением, если есть делаем событие клик по совпавшей кнопке.

localStorage.clear();

- очищаем localStorage.

GSAP+ScrollMagic

В общем я отыскал для себя 2 варианта:
1) это воспользоватся нативным скроллом вот я примерчик быстро наваял codepen.io/dark19/pen/ybboPw , но есть проблемка в том, что я не придумал как задерживать секцию до полного выполнения анимации, может кто знает, то подскажитет;
2) это воспользоватся готовым решением с помощью плагинов GSAP и ScrollMagic (как мне тут подсказали, но удалили коммент). Вот этим вариантом я и воспользовался. Но нужно хорошо разобраться в документации.
На jquery мне показалось проще как-то все сделать, но у меня не было там сверхзадач в проекте. Мне нужно было просто заполнять свг линию цветом и по мере её заполнения в некоторых участках анимировать блоки html(тут ещё есть грабли: рисуйте svg как path потому, что потом вы не сможете заполнить его цветом, там нужно будет использовать свойства stroke-dasharray и stroke-dashoffset). Но я все таки воспользовался плагинами, хотя, я думаю, зря, так как я вручную прописывал точки заполнения свг и когда должна произойти анимация, по другому я не знаю как вычислить степень заполнения линии. Вот вам ещё пример GSAP + ScrollMagic правда тут он без эффектов codepen.io/dark19/pen/WjwoWm

Вот для себя когда-то делал: https://jsfiddle.net/dark19/v7bnLr0b/2/

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

$(document).on('click', 'a',function(e){
            if($(this).is('a:not([data-fancybox])') && $(this).is('a[href^="'+site_url+'"]')){
                //e.preventDefault();
                locationPrev = window.location.href;
                var url = $(this).attr('href'),
                    toLoad = url+' #wrapper',
                    content = $('#ajax-content'),
                    opacityContent = $('#content');
                opacityContent.animate({opacity: 0.1},loadContent());
                function loadContent(){
                    setTimeout(function (){
                        content.load(toLoad,'',function(r, s, x){
                            $.getScript(home_url+"/wp-content/plugins/contact-form-7/includes/js/jquery.form.min.js");
                            $.getScript(home_url+"/wp-content/plugins/contact-form-7/includes/js/scripts.js");
                            $.getScript(template_dir+"/js/map.js");
                            $('html,body').animate({scrollTop: 0}, 500);
                            opacityContent.animate({opacity: 1},500);
                        });
                    },300);
                }

                // А вот так просто меняется ссылка
                if(url != window.location){
                    window.history.pushState(null, null, url);
                }

                return false;
            }
        });

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

В общем я докопался до истины проблемы. Дело в том, что сначала элементам задалась фиксированная высота при заходе на страницу и все она уже не меняется в зависимости от контента, так как функция написана таким образом, что сравнивает высоты и устанавливает наибольшую, но после захода на страницу высоты установились одинаковые. Соответственно при ресайзе нужно высоте давать 'auto', чтобы она могла пересчитываться вновь по максимальной, но тут тоже не всегда срабатывает этот прием, так как бывает хапается старая высота, то есть не успевает сработать 'height: auto', поэтому ещё нужно ставить таймаут.

function heightTitle(parent, el){
        var height = 0;
        $(parent).find(el).css('height','auto');
        setTimeout(function(){
            $(parent).find(el).each(function(){
                if($(this).height() > height){
                    height = $(this).height();
                }
            });
            $(parent).find(el).height(height);
        },300);
    }

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