我正在使用这段代码,在safari和firefox上运行良好,并且在调整浏览器窗口大小和显示移动导航时能够完美地适应。在这两种情况下,所有部分都滚动并与其偏移量对齐(桌面上为140px,移动设备上为60px)。
但在ios safari上,链接不尊重偏移量。。。我在代码上遗漏了什么吗?
谢谢
// Select all links with hashes
$('a[href*="#"]')
// Remove links that don't actually link to anything
.not('[href="#"]')
.not('[href="#0"]')
.click(function(event) {
// On-page links
if (
location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '')
&&
location.hostname == this.hostname
) {
// Figure out element to scroll to
var offset = 0;
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
if ($(this).data('offset') != undefined) offset = $(this).data('offset');
// Does a scroll target exist?
if (target.length) {
// Only prevent default if animation is actually gonna happen
event.preventDefault();
$('html, body').animate({
scrollTop: target.offset().top - offset
}, 1000, function() {
// Callback after animation
// Must change focus!
var $target = $(target);
$target.focus();
if ($target.is(":focus")) { // Checking if the target was focused
return false;
} else {
$target.attr('tabindex','-1'); // Adding tabindex for elements not focusable
$target.focus(); // Set focus again
};
});
}
}
});
html链接都是这样的(移动导航上的data offset=“60”):
<li><a id="link2" href="#page-section-60fd24e9182d15129d52aeec" data-offset="140">Programs</a></li>
暂无答案!
目前还没有任何答案,快来回答吧!