我在手机上使用菜单时遇到了一些问题。 在桌面上,该菜单功能良好,但当我在手机上使用时,我无法导航到另一个页面,只有当滚动到同一页面上的id时,该菜单才起作用。 当我按菜单项:Idalium dawn时,我收到错误消息:uncapted typeerror:不能读取undefined的属性'top'。 我希望有人能帮助我:)
菜单的HTML代码:
<nav class="site-navigation position-relative text-right" role="navigation">
<ul class="site-menu main-menu js-clone-nav mr-auto d-none d-lg-block">
<li><a href="#home-section" class="nav-link">Home</a></li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Products
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item dropdown-text dropdown-header" href="#products-section">All products</a>
<a class="dropdown-item dropdown-text" href="idalium-dawn.html">Idalium Dawn</a>
</div>
</li>
<li><a href="#agents-section" class="nav-link">Agents</a></li>
<li><a href="#about-section" class="nav-link">About</a></li>
<li><a href="#news-section" class="nav-link">News</a></li>
<li><a href="#contact-section" class="nav-link">Contact</a></li>
</ul>
</nav>
导致错误的JS代码
var OnePageNavigation = function() {
var navToggler = $('.site-menu-toggle');
$("body").on("click", ".main-menu li a[href^='#'], .smoothscroll[href^='#'], .site-mobile-menu .site-nav-wrap li a", function(e) {
e.preventDefault();
var hash = this.hash;
$('html, body').animate({
'scrollTop': $(hash).offset().top
}, 600, 'easeInOutExpo');
});
$('.gototop').on('click', function() {
$('html, body').animate({
'scrollTop': $('body').offset().top
}, 600, 'easeInOutExpo');
});
};
Idalium dawn链接没有散列,因为它是外部链接,所以$(hash).offset()是未定义的,这就是错误的原因。
为了防止此错误,您可以将滑块代码换行到这样的条件
var hash = this.hash;
if(hash) {
e.preventDefault();
$('html, body').animate({
'scrollTop': $(hash).offset().top
}, 600, 'easeInOutExpo');
}