Question

我有一个奇怪的问题，我已经与班级有一些联系＆＃34; scrollto＆＃34;在我的页面上，如果你点击它，基本上它只是到页面上的那个部分。顶部链接似乎工作正常（虽然它们在点击时提醒未定义）。侧面浮动导航在单击时也会返回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);
});

jquery这个attr href未定义

1 个答案: