如何解决未捕获到的TypeError:按导航到其他页面的菜单项时,无法读取未定义的属性“ top”
在手机上使用菜单时,我遇到一些问题。 在台式机上,菜单运行良好,但是当我在手机上使用该菜单时,我无法导航至其他页面,仅当滚动到同一页面上的ID时,该菜单才起作用。 当我按下菜单项:Idalium黎明时,我收到错误消息:Uncaught TypeError:无法读取未定义的属性“ 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
},'easeInOutExpo');
});
};
解决方法
理想的黎明链接没有哈希,因为它是外部链接,因此$(hash).offset()是未定义的,这是您出错的原因。
为防止出现此错误,您可以将滑块代码包装为类似条件
var hash = this.hash;
if(hash) {
e.preventDefault();
$('html,body').animate({
'scrollTop': $(hash).offset().top
},600,'easeInOutExpo');
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。