jquery this attr href is undefined

Question

I'm having a weird problem, I've got some links with the class "scrollto" on my page, if you click on it, essentially it just goes to that section on the page. The top links seem to work fine (although they alert undefined when clicked on). The side floating navigation also returns undefined when clicked on, but does nothing.

It works perfectly fine in chrome, but I'm having issues with Firefox and IE (not sure about Mac browsers).

Here's my code:

$('.scrollto').click(function(e){
    e.preventDefault();
    alert( $(this).attr('href') );
    var aid     = $(this).attr('href').replace('#','');
    var aTag    = $('body').find('.section[name="'+aid+'"]').first();
    var offset  = aTag.offset().top - 90;
    $('html,body').stop().animate({scrollTop:offset},1500);
  });

Here's the top links (that work).

<ul>
    <li><span class="number">01</span> <span class="angle">/</span> <a href="#item-01" class="scrollto">Yoga</a></li>
    <li><span class="number">02</span> <span class="angle">/</span> <a href="#item-02" class="scrollto">American Tribal Style Belly Dancing</a></li>
    <li><span class="number">03</span> <span class="angle">/</span> <a href="#item-03" class="scrollto">Tai Chi - Beginner</a></li>
    <li><span class="number">04</span> <span class="angle">/</span> <a href="#item-04" class="scrollto">Tai Chi - Advanced</a></li>
    <li><span class="number">05</span> <span class="angle">/</span> <a href="#item-05" class="scrollto">Chat + Stitch</a></li>
    <li><span class="number">06</span> <span class="angle">/</span> <a href="#item-06" class="scrollto">Bubba Fun</a></li>
    <li><span class="number">07</span> <span class="angle">/</span> <a href="#item-07" class="scrollto">Moving Bodies Gymnastics</a></li>
    <li><span class="number">08</span> <span class="angle">/</span> <a href="#item-08" class="scrollto">Prams in the Park</a></li>
    <li><span class="number">09</span> <span class="angle">/</span> <a href="#item-09" class="scrollto">Storytime</a></li>
    <li><span class="number">10</span> <span class="angle">/</span> <a href="#item-10" class="scrollto">Kimblebees Playgroup</a></li>
    <li><span class="number">11</span> <span class="angle">/</span> <a href="#item-11" class="scrollto">Kindy Gym</a></li>
    <li><span class="number">12</span> <span class="angle">/</span> <a href="#item-12" class="scrollto">Mums Who Make Market</a></li>
    <li><span class="number">13</span> <span class="angle">/</span> <a href="#item-13" class="scrollto">Wow! It's Italian</a></li>
    <li><span class="number">14</span> <span class="angle">/</span> <a href="#item-14" class="scrollto">Cards Club</a></li>
    <li><span class="number">15</span> <span class="angle">/</span> <a href="#item-15" class="scrollto">Walk + Chat</a></li>
    <li><span class="number">16</span> <span class="angle">/</span> <a href="#item-16" class="scrollto">Dream Catcher Adult Workshop</a></li>
    <li><span class="number">17</span> <span class="angle">/</span> <a href="#item-17" class="scrollto">Senior Citizens Club</a></li>
    <li><span class="number">18</span> <span class="angle">/</span> <a href="#item-18" class="scrollto">Rensei Karate</a></li>
    <li><span class="number">19</span> <span class="angle">/</span> <a href="#item-19" class="scrollto">Super Parents Multi Birth Club</a></li>
    <li><span class="number">20</span> <span class="angle">/</span> <a href="#item-20" class="scrollto">Photography - Beginner</a></li>
    <li><span class="number">21</span> <span class="angle">/</span> <a href="#item-21" class="scrollto">Mental Health First Aid for Youth</a></li>
</ul>

Here's the side links (which don't work on this particular page, but work on the homepage)

<div class="section-pagination vertical-align">
    <div>
        <div class="previous"><a href="#item-01" class="scrollto"><i class="fa fa-angle-up"></i></a></div>
        <div class="numbers">
            <p><span class="active">1</span></p>
            <p> / </p>
            <p>21</p>
        </div>
        <div class="next"><a href="#item-01" class="scrollto"><i class="fa fa-angle-down"></i></a></div>
    </div>
</div>

Here's an example of one of the sections it's supposed to scroll to:

<section id="3" name="item-03" class="section">
    <div class="container large">
        <div class="row">
            <div class="col-md-12">
                <div class="item">
                    <svg class="ie-only" width="600px" height="400px" xmlns="http://www.w3.org/2000/svg"><polygon points="0 400,600 400,600 0,200 0" /></svg>
                    <div class="information">
                        <div class="text">
                            <h2><a href="http://kimberly.customcaraudio.com.au/activities-and-events/programs-and-courses/article/3/tai-chi-beginner.html">Tai Chi - Beginner</a></h2>
                            <h3 class="new">New!</h3>
                            <p>Ever wanted to try Tai Chi, but not sure what it's all about? This...</p>
                            <div class="buttons">
                                <a href="http://kimberly.customcaraudio.com.au/activities-and-events/programs-and-courses/article/3/tai-chi-beginner.html" class="button-next"><i class="fa fa-angle-right"></i></a>
                            </div>
                        </div>
                    </div>
                    <div class="image">
                        <a href="http://kimberly.customcaraudio.com.au/activities-and-events/programs-and-courses/article/3/tai-chi-beginner.html"><img src="/images/thumbnail/image__OODzynSjIndmeWWiXIZg.jpg" alt="Tai Chi - Beginner" width="1170" height="670" /></a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <svg class="clip-svg"><defs><clipPath id="information-path-left" clipPathUnits="objectBoundingBox"><polygon points="0 0,1 0,0.66 1,0 1" /></clipPath></defs></svg>
    <svg class="clip-svg"><defs><clipPath id="information-path-right" clipPathUnits="objectBoundingBox"><polygon points="0.345 0,1 0,1 1,0 1" /></clipPath></defs></svg>
</section>

Here's the page:

http://kimberly.customcaraudio.com.au/activities-and-events/programs-and-courses.html

Any help would be great :)

Answer 1

Try changing your javascript to this way

$('.scrollto').click(function(e){
  e.preventDefault();
  var aid     = $(this).attr('href').replace('#','');
  alert( $(this).attr('href') );
  var aTag    = $('body').find('.section[name="'+aid+'"]').first();
  var offset  = aTag.offset().top - 90;
  $('html,body').stop().animate({scrollTop:offset},1500);
});