在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;
}
}
});
});
答案 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;