嘿，我正在尝试修复一个受标签启发的移动页面。当用户单击圆形时，它应该到达文本。当您单击“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 & 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ë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-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-code die op de betaalterminal verschijnt om je betaling te bevestigen.<br> Dat kan gewoon vanuit de Bancontact-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;
});
});
});
最佳答案
这是因为您的父类 .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();
}
});
});
关于javascript - 平滑滚动 anchor 链接需要不必要的双击，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37437403/