CODEWITHSUNDEEP
urlhashscrollphotoswipe
user3597862
user3597862

Reputation: 121

photoswipe returning to initial hash of current page instead of last scroll position

On IOS, when I close photoswipe to return to the page, it wont return to the scroll position I was at when I clicked the thumbnail.

Instead the page scrolls back to the # which was specified when I initially called the page.

For example if photoswipe is on www.somepage.html, and I navigate to the page using:

www.somepage.html#footer

and then scroll up and click a thumnail in #middle of page, on closing photoswipe, the page scrolls back down to the footer.

I've tried disabling history in the photswipe options, and i've also tried clearing the hash data from the url using:

//clear hash
//$(document).ready(function (e) {
//    window.location.hash = '';
//    window.history.pushState("", document.title, window.location.pathname);
//    
//});

But none of it seems to work. If I navigate to the page without the # in the page, everthing is fine.

I'm guessing I may have to pass a variable in the url instead of the # and scroll to the div in question via javascript?

I already have the javascript in place to scroll, but I'm not sure how to read the variable from the url and then use it's value in Javascript.

If this is likely to be the best fix for the issue, could anyone give an example of the javascript code needed?

Here's my current scroll code:

$(function () {
        $('a[href*=#]:not([href=#],[data-toggle],[data-target],[data-slide])').click(function () {
            if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') || location.hostname == this.hostname) {
                var target = $(this.hash);
                target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
                if (target.length) {
                    $('html,body').animate({
                        scrollTop: target.offset().top
                    }, 1000);
                    return false;
                }
            }
        });
    });

Upvotes: 1

Views: 313

Answers (1)

user3597862
user3597862

Reputation: 121

If anyone else has the same issue, I've managed to fix this by passing the div id to the page in the query string rather than using a #.

Here's the code:

$(window).ready(function () {

    if (document.location.search.length) {
        target = getUrlVars()["id"];
        scrollToID('#' + target, 750);

    } else {
        return;
    }
    //target = $url().param('id');
    //if (target == '') return;
   
   
  
});


function getUrlVars() {
    var vars = [], hash;
    var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
    for (var i = 0; i < hashes.length; i++) {
        hash = hashes[i].split('=');
        vars.push(hash[0]);
        vars[hash[0]] = hash[1];
    }
    return vars;
}


// scroll function
function scrollToID(id, speed){
    var offSet = 100;
    var targetOffset = $(id).offset().top - offSet;
    var mainNav = $('#main-nav');
    $('html,body').animate({scrollTop:targetOffset}, speed);
    if (mainNav.hasClass("open")) {
        mainNav.css("height", "1px").removeClass("in").addClass("collapse");
        mainNav.removeClass("open");
    }
}
if (typeof console === "undefined") {
    console = {
        log: function() { }
    };
}

Upvotes: 0

Related Questions