photoswipe返回当前页面的初始哈希值而不是最后一个滚动位置

时间:2016-09-15 10:44:36

标签: url hash scroll photoswipe

在IOS上,当我关闭照片以返回页面时,它不会返回到我点击缩略图时的滚动位置。

而是页面滚动回到我最初调用页面时指定的#。

例如,如果photoswipe位于www.somepage.html,我使用以下方式导航到该页面:

www.somepage.html#footer

然后向上滚动并点击#middle页面中的一个thumnail,在关闭photoswipe时,页面会向下滚动到页脚。

我已尝试在photswipe选项中禁用历史记录,并且我还尝试使用以下方法清除网址中的哈希数据:

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

但似乎没有任何效果。如果我导航到页面中没有#的页面,那么就可以了。

我猜我可能不得不在网址中传递一个变量而不是#并通过javascript滚动到相关的div?

我已经有了javascript来滚动,但我不确定如何从网址中读取变量,然后在Javascript中使用它的值。

如果这可能是解决问题的最佳方法,那么是否有人可以提供所需的javascript代码示例?

这是我当前的滚动码:

$(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;
                }
            }
        });
    });

1 个答案:

答案 0 :(得分:0)

如果其他人有同样的问题,我已设法通过将div id传递给查询字符串中的页面而不是使用#来解决此问题。

以下是代码:



$(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() { }
    };
}
&#13;
&#13;
&#13;