jquery - 無限スクロールを使用する場合は、ブラウザの戻るボタンの後に位置を保持します

Question

誰かが私のウェブショップのために無限のスクローラーを作成しました。これは、1つのことを除いて非常にうまく機能します。ページの途中で商品をクリックすると、商品ページに移動します。ユーザーがブラウザーの戻るボタンを押すと、ユーザーは無限スクローラーでページに戻ります。問題は、ユーザーが最初に製品をクリックした位置に、スクリプトがすべての製品を再度ロードすることです。つまり、戻るボタンを押すと、すべての製品が再度ロードされます。このサイトを検索した後、window.loacation.hashで何かできることを読みました。問題は、私がJSとJqueryの初心者であるため、これが以下のコードにどのように適合するかについての手がかりがないことです。どんな助けでも大歓迎です...

以下のコードに誤りがあったことをお詫びしますが、スクリプトを縮小する必要がありました。

私のコード

var currentPage = {{ collection.page }};
var collectionPages = {{ collection.pages }};
var category = '{{ collection.internal.url }}';
var appendProduct = function (product) {
    if (currentPage == 1) {
        return false
    }
    $('<div class="product"></div>').html(product).appendTo($(".productsGrid"));
    var i = 1;
    $('.product').each(function () {
        if (i++ % 3 == 0) $(this).addClass('last')
    })
};
var loadProducts = function () {
    var url = "http://www.riemen-tekoop.nl/" + category + "/page" + currentPage + ".ajax" + window.location.search;
    $.getJSON(url, function (data) {
        $.each(data.products, function (index, product) {
            var imageUrl = product.image.replace('50x50x2', '210x175x2');
            var itemHtml = '' + '<a href="' + product.url + '" title="' + product.title + ' ' + product.brand.title + '"><img src="' + imageUrl + '" width="210" height="175" alt="' + product.title + ' ' + product.brand.title + '" title="' + product.title + ' ' + product.brand.title + '"/>';
            if (product.price.price_old) {
                itemHtml = itemHtml + '<div class="perc">' + (((+product.price.price / product.price.price_old) * 100) - 100).toFixed(0) + '%</div>'
            }
            itemHtml = itemHtml + '<div class="caption" style="display:none;"><a href="' + product.url + '" class="opener">Quick view</a></div>' + '</a>' + '<div class="info">' + '<h3>' + '<a href="' + product.url + '" title="' + product.title + ' ' + product.brand.title + '">' + product.title + ' ' + product.brand.title + '</a>' + '</h3>' + '<div class="gridAddToCart">' + '<a class="btnLink" href="' + product.url + '" title="' + product.title + ' ' + product.brand.title + '" rel="nofollow" alt="Bekijk details"><span>{{ '
            Details ' | t }}</span></a>' + '<a class="btnWishlist" href="{{ ' / account / wishlistAdd / ' }}' + product.id + '" title="{{ '
            Add to wishlist ' | t }}" rel="nofollow" alt="Zet op {{ '
            Wishlist ' | t }}"></a>' + '</div>' + '<div class="price"><strong>' + product.price.price_money + '</strong>';
            if (product.price.price_old) {
                itemHtml = itemHtml + ' <span>' + product.price.price_old_money + '</span>'
            }
            itemHtml = itemHtml + '<div class="clear"></div>' + '</div>' + '</div>' + '<span class="imgshadow"></span>';
            appendProduct(itemHtml)
        });
        $("#overlay").fadeOut();
        $(window).scroll(function () {
            update()
        })
    })
};
loadProducts();
var isUpdating = false;
var update = function () {
    if ($(window).height() + $(window).scrollTop() >= $(document).height() - 4000) {
        if (currentPage < collectionPages && !isUpdating) {
            isUpdating = true;
            currentPage++;
            $("#overlay").fadeIn();
            $(window).unbind('scroll');
            setTimeout(function () {
                loadProducts();
                setTimeout(function () {
                    isUpdating = false
                }, 500)
            }, 500)
        }
    }
};
$(window).scroll(function () {
    update()
});