我正在尝试使用 jQuery 和 smoothscroll.js 实现平滑滚动。我已经对为什么我在开发工具中遇到此错误进行了大量研究，但我似乎无法弄清楚:
TypeError: $(...).offset(...) is undefined
这是我的代码:
/*----------------------------------------------------*/
// MENU SMOOTH SCROLLING
/*----------------------------------------------------*/
$(".main-menu a, .logo a, .home-logo-text a, .home-logo a, .scroll-to").bind('click', function(event) {
$(".main-menu a").removeClass('active');
$(this).addClass('active');
var headerH = $('.navigation').outerHeight();
$("html, body").animate({
scrollTop: $($(this).attr("href")).offset().top - headerH + 'px'
}, {
duration: 1200,
easing: "easeInOutExpo"
});
event.preventDefault();
});
这是 html:
<body class="onepage" data-spy="scroll" data-target=".navigation">
<div id="load"></div>
<!-- START PAGE WRAP -->
<div class="page-wrap">
<!-- START HOME SECTION -->
<div id="home" class="home-parallax">
<div class="home-text-wrapper">
<div class="home-logo-text">
<a href="index.html#about">Welcome to Jarvis</a>
</div>
<div id="home-slider" class="flexslider">
<ul class="slides styled-list">
<li class="home-slide"><p class="home-slide-content">We are <span class="highlight">Creative</span> Nerds</p></li>
<li class="home-slide"><p class="home-slide-content">We are <span class="highlight">crazy</span> Coders</p></li>
<li class="home-slide"><p class="home-slide-content">We <span class="highlight">love</span> Pizzas</p></li>
</ul>
</div><!-- END FLEXSLIDER -->
</div><!-- END HOME TEXT WRAPPER -->
</div><!-- END HOME SECTION -->
<!-- START NAVIGATION -->
<nav class="light sticky-nav navigation">
<!-- START CONTAINER -->
<div class="container clearfix">
<div class="four columns">
<!-- START LOGO -->
<div class="logo large">
<a href="index.html#home"><img src="images/logo.png" title="logo" alt="Logo"/></a>
</div>
<!-- END LOGO -->
</div><!-- END FOUR COLUMNS -->
<div class="twelve columns">
<!-- START NAVIGATION MENU ITEMS -->
<ul class="main-menu large nav" id="nav">
<li><a href="index.html#home">Home</a></li>
<li><a href="index.html#about">About</a></li>
</ul>
<!-- END NAVIGATION MENU ITEMS -->
</div><!-- END TWELVE COLUMNS -->
</div><!-- END CONTAINER -->
</nav>
<!-- END NAVIGATION -->
<!-- START ABOUT US SECTION -->
<div id="about" class="page">
<div class="container">
<div class="row">
<div class="sixteen columns">
<!-- START TITLE -->
<div class="title">
<h1>About Jarvis</h1>
<div class="subtitle">
<p>we are utmost <span class="highlight">Creative Agency</span> located in Melbourne, Australia. Praesent rhoncus nunc <span class="highlight">vitae metus</span> condimentum viverra.</p>
</div><!-- END SUBTITLE -->
</div><!-- END TITLE -->
</div><!-- END SIXTEEN COLUMNS -->
</div><!-- END ROW -->
</div><!-- END CONTAINER -->
最佳答案
在获取 offset() 函数的 top 属性之前，请检查元素是否存在:
/*----------------------------------------------------*/
// MENU SMOOTH SCROLLING
/*----------------------------------------------------*/
$(".main-menu a, .logo a, .home-logo-text a, .home-logo a, .scroll-to").bind('click', function(event) {
$(".main-menu a").removeClass('active');
$(this).addClass('active');
var headerH = $('.navigation').outerHeight();
var destinateEle = $($(this).attr("href"));
if (destinateEle.length == 0) {
return;
}
$("html, body").animate({
scrollTop: destinateEle.offset().top - headerH
}, {
duration: 1200,
easing: "easeInOutExpo"
});
event.preventDefault();
}); 阅读完您更新 HTML 后，我必须更改 js 以删除“index.html”。 Jquery('index.html#your-id') 将始终返回空元素。
/*----------------------------------------------------*/
// MENU SMOOTH SCROLLING
/*----------------------------------------------------*/
$(".main-menu a, .logo a, .home-logo-text a, .home-logo a, .scroll-to").bind('click', function(event) {
$(".main-menu a").removeClass('active');
$(this).addClass('active');
var headerH = $('.navigation').outerHeight();
var queryIDArr = $(this).attr("href").split('#');
if (queryIDArr.length < 2) return;
var queryID = queryIDArr[1];
var destinateEle = $('#' + queryID);
if (destinateEle.length == 0) {
return;
}
$("html, body").animate({
scrollTop: destinateEle.offset().top - headerH
}, {
duration: 1200,
easing: "easeInOutExpo"
});
event.preventDefault();
}); 关于javascript - TypeError : $(. ..).offset(...) 未定义且偏移存在，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36151654/