jQuery這個attr href未定義

Question

我有一個奇怪的問題，我的頁面上有一些與“ scrollto”類的鏈接，如果您單擊它，本質上它只是轉到頁面上的該部分。 頂部鏈接似乎運行良好（盡管單擊時會發出未定義的警報）。 單擊時，側面浮動導航也會返回undefined，但不執行任何操作。

它在chrome中工作正常，但是Firefox和IE出現問題（不確定Mac瀏覽器）。

這是我的代碼：

$('.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);
  });

這是最有效的鏈接。

<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>

這是側邊鏈接（在此特定頁面上不起作用，但在主頁上起作用）

<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>

這是應該滾動到的部分之一的示例：

<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>

這是頁面：

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

任何幫助將是巨大的:)

Answer 1

嘗試將您的JavaScript更改為這種方式

$('.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);
});