javascript - 平滑滚动 anchor 链接需要不必要的双击

Question

嘿，我正在尝试修复一个受标签启发的移动页面。当用户单击圆形时，它应该到达文本。当您单击“Terug naar keuzemenu”时，您应该返回到圆圈(选项卡的导航)。但是，当我第一次单击要转到其他选项卡时，他不会滚动到文本部分，但第二次他会滚动到文本部分。所以我必须点击两次，但不明白为什么。

fiddle

https://jsfiddle.net/Ljv5a2ez/2/

HTML

<div class="span12" id="xx-content">
        <div class="clearfix row-fluid">
            <div class="xx_content_inner">
                <div class="xx_row-12" id="aj_logobox">
                    <div class="span3">
                        <div class="xx_active check-up-overview" id="lente">
                            <div class="xx_logo_container">
                                <div class="xx_logo_inner">
                                <a href="#hometext">
                                <img src="http://www1.asadventure.com/headoffice/13-ASA-2374/img/home_delivery.jpg" />
                                </a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="span3">
                        <div class="check-up-overview" id="full">
                            <div class="xx_logo_container">
                                <div class="xx_logo_inner">
                                <a href="#collecttext">
                                <img src="http://www1.asadventure.com/headoffice/13-ASA-2374/img/click_and_collect.jpg" />
                                </a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="span3">
                        <div class="check-up-overview" id="pro">
                            <div class="xx_logo_container">
                                <div class="xx_logo_inner">
                                <a href="#moretext">
                                <img src="http://www1.asadventure.com/headoffice/13-ASA-2374/img/look_for_more.jpg" />
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="span3">
                        <div class="check-up-overview" id="ebike">
                            <div class="xx_logo_container">
                                <div class="xx_logo_inner">
                                <a href="#smarttext">
                                <img src="http://www1.asadventure.com/headoffice/13-ASA-2374/img/smartpay_cirkel.jpg" />
                                </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="xx_row-2 lente bike-show" id="hometext">

                    <p><span class="xx_title" id="title"><h2 class="aj_h2fix">Gratis thuis leveren vanuit je A.S.Adventure Store</h2></span></p>
                    <p class="xx_excl">Sta je in de winkel en is het product van je dromen niet meer beschikbaar in een andere maat of kleur?<br> Geen nood: indien voorradig in een andere A.S.Adventure Store, <strong>bestellen</strong> we het gewenste product in de Store en <strong>leveren</strong> we het <strong>gratis</strong><br> op een <strong>adres naar keuze</strong>. Van service gesproken.</p>

                </div>
                <div class="xx_row-2 full bike-hide" id="collecttext">
                    <p><span class="xx_title" id="title"><h2 class="aj_h2fix">Maak je keuze online en haal je bestelling op in de winkel</h2></span></p>
                    <p class="xx_excl">Vanuit je luie zetel shoppen? Winkelen bij A.S.Adventure kun je altijd en overal. Wil je helemaal zeker zijn van de maat of kleur?<br> <strong>Reserveer online zonder aankoopverplichting</strong> via de Click &amp; Collect service en haal je bestelling later op in jouw<br> <strong>favoriete A.S.Adventure Store</strong>. Je kiest zelf wat je wel of niet koopt.</p>
                </div>          
                <div class="xx_row-2 pro bike-hide" id="moretext">
                    <p><span class="xx_title" id="title"><h2 class="aj_h2fix">Ontdek een nog uitgebreider aanbod in onze webshop</h2></span></p>
                    <p class="xx_excl">Dacht je dat je alles al gezien had in onze Stores? Think again! In <strong>onze webshop vind</strong> je van de onderstaande merken een <strong>nog uitgebreider aanbod</strong>. <br>Gebruik de schermen in de Stores om naar de webshop te surfen of grasduin online door ons aanbod.<br> Keuze gemaakt? Laat je producten dan <strong>gratis afleveren</strong> via Home Delivery.</p>
                </div>
                <div class="xx_row-2 ebike bike-hide" id="smarttext">
                    <p><span class="xx_title" id="title"><h2 class="aj_h2fix">Betaal je aankopen in de winkel met je smartphone</h2></span></p>
                    <p class="xx_excl">Merk je tijdens het winkelen dat je je portefeuille bent vergeten? Geen nood, vanaf nu kun je <strong>in alle A.S.Adventure Stores ook betalen met SmartPay</strong>. <br>Even je <strong>smartphone</strong> opdiepen, de <strong>Bancontact-app</strong> openen en de <strong>unieke QR-code</strong> aan de kassa inscannen. <br>Je hoeft dan alleen nog even de betaling te bevestigen met je pincode. Makkelijk, veilig en effici&euml;nt!</p>
                </div>
            </div>
        </div>
        <div class="clearfix row-fluid lente bike-show">
            <div class="xx_row-3">
                <div class="span12">
                    <div class="xx_span_inner xx_top">
                        <h3>Hoe werkt het?</h3>

                        <ul style="list-style:none;">
                            <li><span>1.</span> We bestellen samen in de Store met jou het gewenste artikel via onze website.</li>
                        <li><span>2.</span> Je betaalt aan de kassa.</li>
                        <li class="xx_last-item"><span>3.</span> Je bestelling wordt enkele dagen later geleverd op een adres naar keuze of bij een afhaalpunt.</li>
                        </ul>
                </div>
            </div>
        </div>
        <a href="#lente">Terug naar keuzemenu</a>
    </div>

    <div class="clearfix row-fluid full bike-hide">
        <div class="xx_row-3">
            <div class="span12">
                <div class="xx_span_inner xx_top">
                    <h3>Hoe werkt het?</h3>

                    <ul style="list-style:none;">
                        <li><span>1.</span> Reserveer en betaal je product(en) online.</li>
                        <li><span>2.</span> Kies de winkel waar je je product(en) wenst af te halen.</li>
                        <li><span>3.</span> Je ontvangt via mail een bevestiging van je bestelling.</li>
                        <li><span>4.</span> Via mail of sms verneem je wanneer je product(en) klaarliggen.</li>
                        <li class="xx_last-item"><span>5.</span> Mocht je in de winkel alsnog beslissen je aankoop te annuleren, krijg je onmiddellijk je geld terug.</li>
                    </ul>
                </div>
            </div>
        </div>
        <a href="#lente">Terug naar keuzemenu</a>
    </div>

    <div class="clearfix row-fluid pro bike-hide">
        <div class="xx_row-3">
            <div class="span12">
                <div class="xx_span_inner xx_top">
                    <h3>Uitgebreid aanbod:</h3>

                    <div id="xx_aanbod_logos">
                        <a alt="Fjallraven" href="http://www.asadventure.com/benl/fjallraven" target="_parent"><img src="http://www1.asadventure.com/headoffice/13-ASA-2374/img/logo_fjallraven.png" /> </a>
                        <a alt="The North Face" href="http://www.asadventure.com/benl/the-north-face" target="_parent"> <img src="http://www1.asadventure.com/headoffice/13-ASA-2374/img/logo_the-north-face.png" /> </a>
                        <a alt="Vaude" href="http://www.asadventure.com/benl/vaude" target="_parent"> <img src="http://www1.asadventure.com/headoffice/13-ASA-2374/img/logo_vaude.png" /> </a>
                        <a alt="Garmin" href="http://www.asadventure.com/benl/garmin" target="_parent"> <img src="http://www1.asadventure.com/headoffice/13-ASA-2374/img/logo_garmin.png" /> </a>
                        <a alt="Thule" href="http://www.asadventure.com/benl/thule" target="_parent"> <img src="http://www1.asadventure.com/headoffice/13-ASA-2374/img/logo_thule.png" /> </a>
                        <a alt="Eastpak" href="http://www.asadventure.com/benl/eastpak" target="_parent"> <img src="http://www1.asadventure.com/headoffice/13-ASA-2374/img/logo_eastpak.png" /> </a>
                        <a alt="Millet" href="http://www.asadventure.com/benl/millet" target="_parent"> <img src="http://www1.asadventure.com/headoffice/13-ASA-2374/img/logo_millet.png" /> </a>
                        <a alt="Gore Bike wear" href="http://www.asadventure.com/benl/gore-bike-wear" target="_parent"> <img src="http://www1.asadventure.com/headoffice/13-ASA-2374/img/logo_gore_bike.png" /> </a>
                        <a alt="Gore Running wear" href="http://www.asadventure.com/benl/gore-running-wear" target="_parent"> <img src="http://www1.asadventure.com/headoffice/13-ASA-2374/img/logo_gore_running.png" /> </a>
                        <a alt="Mi-Pac" href="http://www.asadventure.com/benl/mi-pac" target="_parent"> <img src="http://www1.asadventure.com/headoffice/13-ASA-2374/img/logo_mi-pac.png" /> </a>
                        <br>
                        <a alt="Suunto" href="http://www.asadventure.com/benl/suunto" target="_parent"> <img src="http://www1.asadventure.com/headoffice/13-ASA-2374/img/logo_suunto.png" /> </a>
                        <a alt="Polar" href="http://www.asadventure.com/benl/polar" target="_parent"> <img src="http://www1.asadventure.com/headoffice/13-ASA-2374/img/logo_polar.png" /> </a>
                        <a alt="Camel Active" href="http://www.asadventure.com/benl/camel-active" target="_parent"> <img src="http://www1.asadventure.com/headoffice/13-ASA-2374/img/logo_camel_active.png" /> </a>
                        <a alt="Dakine" href="http://www.asadventure.com/benl/dakine" target="_parent"> <img src="http://www1.asadventure.com/headoffice/13-ASA-2374/img/logo_dakine.png" /> </a>
                        <a alt="Lowa" href="http://www.asadventure.com/benl/lowa" target="_parent"> <img src="http://www1.asadventure.com/headoffice/13-ASA-2374/img/logo_lowa.png" /> </a>
                        <a alt="CKS" href="http://www.asadventure.com/benl/cks-dames" target="_parent"> <img src="http://www1.asadventure.com/headoffice/13-ASA-2374/img/logo_cks_black.png" /> </a>
                        <a alt="Komono" href="http://www.asadventure.com/benl/komono" target="_parent"> <img src="http://www1.asadventure.com/headoffice/13-ASA-2374/img/logo_komono.png" /> </a>
                        <a alt="Jack Wolfskin" href="http://www.asadventure.com/benl/jack-wolfskin" target="_parent"> <img src="http://www1.asadventure.com/headoffice/13-ASA-2374/img/logo_wolfskin.png" /> </a>
                        <a alt="BakerBridge" href="http://www.asadventure.com/benl/baker-bridge" target="_parent"> <img src="http://www1.asadventure.com/headoffice/13-ASA-2374/img/logo_baker-bridge.png" /> </a>
                        <a alt="BakerBridge Dames" href="http://www.asadventure.com/benl/baker-bridge-dames" target="_parent"> <img src="http://www1.asadventure.com/headoffice/13-ASA-2374/img/logo_baker-bridge-dames.png" /> </a>
                        <a alt="Bergans" href="http://www.asadventure.com/benl/bergans" target="_parent"> <img src="http://www1.asadventure.com/headoffice/13-ASA-2374/img/logo_bergans.png" /> </a>
                        <a alt="Van Hassels" href="http://www.asadventure.com/benl/van-hassels" target="_parent"> <img src="http://www1.asadventure.com/headoffice/13-ASA-2374/img/logo_van-hassels.png" /> </a>
                    </div>
                </div>
            </div>
        </div>
        <a href="#lente">Terug naar keuzemenu</a>
    </div>

    <div class="clearfix row-fluid ebike bike-hide">
        <div class="xx_row-3">
            <div class="span12">
                <div class="xx_span_inner xx_top">
                    <h3>Hoe werkt het?</h3>

                    <ul style="list-style:none;">
                        <li><span>1.</span> Installeer de Bancontact-app op je smartphone:</li>
                        <li><span></span><a target="_blank" href="https://play.google.com/store/apps/details?id=mobi.inthepocket.bcmc.bancontact&hl=en">Google Play >></a></li>
                        <li><span></span><a target="_blank" href="https://itunes.apple.com/be/app/bancontact-mobile/id858371800?l=en&mt=8">Apple App Store >></a></li>
                        <li><span></span><a target="_blank" href="https://www.microsoft.com/en-gb/store/apps/bancontact/9nblggh3fvl1">Microsoft Store >></a></li>
                        <li><span>2.</span> Open de Bancontact&#45;app en volg de instructies om de app te activeren en je bankkaart(en) toe te voegen.</li>
                        <li><span>3.</span> Aan de kassa scan je de unieke QR&#45;code die op de betaalterminal verschijnt om je betaling te bevestigen.<br> Dat kan gewoon vanuit de Bancontact&#45;app.</li>
                        <li><span>4.</span> Je smartphone toont de naam van de winkel en het te betalen bedrag op het scherm.</li>
                        <li class="xx_last-item"><span>5.</span> Druk op OK, geef je pincode op in de app en je krijgt een bevestigingsbericht te zien op je telefoon. Transactie geslaagd!</li>
                    </ul>
                </div>
            </div>


        </div>
        <a href="#lente">Terug naar keuzemenu</a>
    </div>

</div>

JS 标签

$(document).ready(function () {
    $('.check-up-overview').click(function () {
        if (!$(this).hasClass('xx_active')) {
            var sCurrent = $(this).attr('id');
            var sPrevious = $('.xx_active').attr('id');
            $('.xx_active').removeClass('xx_active');
            $('.' + sPrevious).removeClass('bike-show').addClass('bike-hide');
            $(this).addClass('xx_active');
            $('.' + sCurrent).removeClass('bike-hide').addClass('bike-show');
        }
    });
});

JS 平滑

$(document).ready(function(){
    $('a[href^="#"]').on('click',function (e) {
        e.preventDefault();
        var target = this.hash;
        $target = $(target);
        $('html, body').stop().animate({
            'scrollTop':  $target.offset().top //no need of parseInt here
        }, 900, 'swing', function () {
            window.location.hash = target;
        });
    });
});

Answer 1

这是因为您的父类 .check-up-overview 上的点击处理程序。

当您点击圆圈时，它会导致双重触发，这解释了为什么您必须点击两次才能绑定(bind) scrollTop() 函数。

此处 JS 代码已更改:

$(document).ready(function() {
  $('a[href^="#"]').on('click', function(e) {
    if (!$(this).parents('.check-up-overview').hasClass('xx_active')) {
      var sCurrent = $(this).parents('.check-up-overview').attr('id');
      var sPrevious = $('.xx_active').attr('id');
      $('.xx_active').removeClass('xx_active');
      $('.' + sPrevious).removeClass('bike-show').addClass('bike-hide');
      $(this).parents('.check-up-overview').addClass('xx_active');
      $('.' + sCurrent).removeClass('bike-hide').addClass('bike-show');
    }
    if($(window).width() < 768){
      e.preventDefault();
      var target = this.hash;
      $target = $(target);
      $('html, body').animate({
        'scrollTop': $target.offset().top //no need of parseInt here
      }, 900, 'swing', function() {
        //window.location.hash = target;
      });
    }else{
      e.preventDefault();
    }
  });
});

And here is the working fiddle