我创建了单页设计。所有内容都在一个地方 - 主页。用jQuery我代码创建一个去锚定导航。当滚动菜单的当前状态正在更新时,当点击链接时,它将滚动到该链接的正确位置/部分。
不幸的是,菜单在平板电脑和智能手机上效果不佳。
当我将视口更改为平板电脑时,它将滚动到该位置,但随后它将停止到早期,因此它不在浏览器的顶部。在移动设备上,它会滚动到错误的位置,organisatie
将始终是当前菜单项。是否有针对此问题的修复程序?
// One Page Navigation - scroll to anchor id
$('#primary-navwrapper, #footer .list-of-links').find('li a[href^="#"]').click(function(event) {
//primary-navwrapper li:not(.prev-page, .next-page), .list-of-links li
// Prevent from default action to intitiate
event.preventDefault();
// Update active class on click
$('#primary-navwrapper li a').removeClass('current');
$(this).addClass('current');
// The id of the section we want to go to
// var anchor = this.hash;
var anchorId = $(this).attr('href');
//console.log(anchorId);
scrollToAnchor(anchorId);
if (isMobile) {
nav.slideToggle();
}
return false;
});
function scrollToAnchor(anchorId) {
// Our scroll target : the top position of the section that has the id referenced by our href
if (anchorId.length) {
var target = $(anchorId).offset().top - offset;
//console.log("target" + target);
}
// The magic...smooth scrollin' goodness.
$('html, body').animate({ scrollTop: target }, 500, function () {
//window.location.hash = '!' + id;
window.location.hash = anchorId;
});
}
你可以看到它here。