Question

我正在尝试使用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 -->

Answer 1

在获得offset（）函数的top属性之前，请检查元素是否存在：

＆＃13;

/*----------------------------------------------------*/
// 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();
});

＆＃13;

阅读更新HTML后，我必须更改js以删除＆＃34; index.html＆＃34;。 Jquery（＆＃39; index.html＃your-id＆＃39;）将始终返回空元素。

＆＃13;

/*----------------------------------------------------*/
// 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();
});

＆＃13;

TypeError：$（...）。offset（...）未定义且偏移存在

1 个答案: