类型错误: $(..).偏移量(..)未定义,偏移量存在
TypeError: $(...).offset(...) is undefined and offset exists
我正在尝试使用jQuery和smoothscroll.js实现平滑滚动。我已经做了很多研究,为什么我在开发工具中出现此错误,但我似乎无法弄清楚:
类型错误: $(...)。偏移量(...) 未定义
这是我的代码:
/*----------------------------------------------------*/
// 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() 函数的顶部属性之前检查元素是否存在:
/*----------------------------------------------------*/
// 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();
});
相关文章:
- 添加新数据时D3.JS条形图列偏移量
- 当偏移量改变时滚动顶部
- 引导数据偏移量底部
- 可以在调整窗口大小时重新调整stellar.js的元素偏移量
- 可滚动元素,如何在调整大小时更改顶部偏移量
- 使用JavaScript日期的任何时间的时区偏移量
- 时刻时区:UTC 偏移量差异
- jQuery偏移量顶部没有'工作不正常
- 如何获取当前时区偏移量(并正确格式化)
- d3.mouse 偏移量返回的值不正确
- jQuery根据鼠标位置计算DIV偏移量和边界
- 更改 for 循环中 SVG 行的笔触虚线偏移量
- 时区偏移量计算
- jquery 如何设置偏移量 () 值
- 在javascript中向本地时间戳添加时间戳偏移量
- jquery ui draggable中的奇怪偏移量
- 如何在发布JavaScript日期对象时保留时区偏移量
- 如何使用javascript获取&使用字符偏移量设置插入符号位置
- Javascript日期(yyyy-mm-ddThh:mm:ss偏移量)未正确转换
- 类型错误: $(..).偏移量(..)未定义,偏移量存在