0

スクロール時にナビゲーションをアクティブに設定するページスクローラーのこの例を使用しています。

お役に立てれば幸いです。

コンソールにこのエラーが表示されます。

TypeError: $(...).offset(...) は未定義です [このエラーで中断]

contentTop.push( $( $(this).attr('href') ).offset().top );

HTML

<nav id="nav">
    <ul>
        <li><a href="#1">B</a></li>
        <li><a href="#2">B</a></li>
        <li><a href="#3">C</a></li>
        <li><a href="#4">D</a></li>
        <li><a href="#5">E</a></li>
        <li><a href="#6">F</a></li>
    </ul>
</nav>

JS

smoothScroll: function() {
     var topRange      = 200,  // measure from the top of the viewport to X pixels down
         edgeMargin    = 20,   // margin above the top or margin from the end of the page
         animationTime = 1200, // time in milliseconds
         contentTop = [];

     // Stop animated scroll if the user does something
     $('html,body').bind('scroll mousedown DOMMouseScroll mousewheel keyup', function(e){
     if ( e.which > 0 || e.type == 'mousedown' || e.type == 'mousewheel' ){
      $('html,body').stop();
     }
    })

     // Set up content an array of locations
     $('#nav').find('a').each(function(){
      contentTop.push( $( $(this).attr('href') ).offset().top );
     })

     // Animate menu scroll to content
      $('#nav').find('a').click(function(){
       var sel = this,
           newTop = Math.min( contentTop[ $('#nav a').index( $(this) ) ], $(document).height() - $(window).height() ); // get content top or top position if at the document bottom
       $('html,body').stop().animate({ 'scrollTop' : newTop }, animationTime, function(){
        window.location.hash = $(sel).attr('href');
       });
       return false;
     })

     // adjust side menu
     $(window).scroll(function(){
      var winTop = $(window).scrollTop(),
          bodyHt = $(document).height(),
          vpHt = $(window).height() + edgeMargin;  // viewport height + margin
      $.each( contentTop, function(i,loc){
       if ( ( loc > winTop - edgeMargin && ( loc < winTop + topRange || ( winTop + vpHt ) >= bodyHt ) ) ){
        $('#nav li a')
         .removeClass('selected')
         .eq(i).addClass('selected');
       }
      })
     })
  },
4

0 に答える 0