Как реализовать history API для возврата к предыдущему состоянию страницы?

Question

[VladLeonenko]

Очень нужна помощь! Спросить не у кого и все надежды только на Вас.
Я делаю пробный интернет-магазин и столкнулся с проблемой.
При переходе из карточки товара обратно в каталог, мобильная версия браузера Chrome скроллит экран в самый низ.
Каталог выгружается из файла JSON, вот пример кода для выгрузки карточки товара:

function loadGoods(){
 $.getJSON('goods.json', function (data) {
        let out = ''
        function showMansGoods() {
            for (let key in data){

                if (key > 1000 && key < 2000){
                    out+='<div class="single-goods" data-price="'+data[key].cost+'" id="'+data[key]['article']+'">'

                    out+= '<div class="goodsCart">'
                    out+='<img src="'+data[key].img4+'" alt="">'
                    out+='</div>'

                    out+='<a class="getArticle" data-art="'+key+'" href="goodsDetails.html">'
                    out+='<h3>'+data[key]['name']+'</h3>'
                    out+='</a>'

                    out+='<p>Цена: '+data[key]['cost']+' руб</p>'
                    out+='<button class="addToBag" data-art="'+key+'">В корзину</buttondata-art>'
                    out+='</div>'
                }
                if (key > 4000 && key < 4050){
                    out+='<div class="single-goods" data-price="'+data[key].cost+'">'

                    out+= '<div class="goodsCart">'
                    out+='<img src="'+data[key].img+'" alt="">'
                    out+='</div>'

                    out+='<a class="getArticle" data-art="'+key+'" href="goodsDetails.html">'
                    out+='<h3>'+data[key]['name']+'</h3>'
                    out+='</a>'

                    out+='<p>Цена: '+data[key]['cost']+' руб</p>'
                    out+='<button class="addToBag" data-art="'+key+'">В корзину</buttondata-art>'
                    out+='</div>'
                }
                $('.manGoodsPage').html(out)
            }
        }
        showMansGoods()
    })
}

Cоответственно, в зависимости от величины key на одной и той же странице могут отображаться товары из разных категорий.
Насколько я понял, мне нужен history API, но реализовать у меня не выходит.
Вот мои попытки в реализации этой задумки в коде:

let goodsHistory = Array.from(document.getElementsByClassName('single-goods'));

 function selectGoods(id){
     goodsHistory.forEach(b => {
         b.classList.toggle('selected', b.id === id);     
     });
 }
 goodsHistory.forEach(b => {
     let id = b.id;
     b.addEventListener('click',e =>{
         history.pushState({id}, null, './${id}');
         selectGoods(id);
     });
 });

 window.addEventListener('popstate', e => {
         selectGoods(e.state.id);
});
history.replaceState({id: null}, 'Default state', './index.html');

Судя по тому, что после события popState меня выбрасывает на главную страницу, у меня не выходит корректно передать данные в state.
Не могу понять, как мне иначе передать состояние страницы в параметр state для pushState или replaceState.
Буду очень благодарен за любую помощь.