TypeError: $(...).offset(...) 未定义且存在偏移答案

【问题标题】：TypeError: $(...).offset(...) is undefined and offset existsTypeError: $(...).offset(...) 未定义且存在偏移
【发布时间】：2016-03-22 10:18:31
【问题描述】：

我正在尝试使用 jQuery 和 smoothscroll.js 实现平滑滚动。我已经对为什么在开发工具中出现此错误进行了大量研究，但我似乎无法弄清楚：

TypeError: $(...).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();

    $("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，它返回未定义。这使我相信您的 $(this).attr("href") 值不是有效的选择器，或者在 DOM 中找不到。我们需要查看您的 HTML 以准确诊断问题。
从$(this).attr("href")返回什么？
Rory，我已经添加了 html。

标签： javascript jquery smooth-scrolling

【解决方案1】：

在得到 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();
});

【讨论】：

这会阻止错误发生，但滚动功能不起作用。
仅发布代码的答案并不是特别有用，特别是对于您的答案的未来读者有类似问题但不是完全相同的问题。请说明问题中的代码存在什么问题，以及您在答案中对代码进行了哪些更改或添加以解决这些问题。
@EmmanuelYakubu：因为你为 scrollTo 配置了错误的 href 值。请再次检查。
@AnthonyGrist：每 1 行代码最好 1000 个字。
@AnthonyGrist：如果您没有更好的答案，请不要拒绝我的答案。谢谢。