Stop Bootstrap Akkordeon vom Scrollen

Question

Ich benutze eine Funktion für reibungslose Scrolling, die ein FAQs Akkordeon stören scheint. Beim Öffnen oder Schließen eines Fragen-Tabs springt diese Registerkarte an den Anfang der Seite. Beim Verlassen href * hier

leere Akkordeon funktioniert, aber reibungslose Scrolling ist deaktiviert. Es kann keine Möglichkeit gefunden werden, beide Funktionen gleichzeitig auszuführen.

Wie kann ich verhindern, dass die FAQs-Registerkarten nach oben springen und sich an ihrer tatsächlichen Position öffnen, ohne das reibungslose Scrollen zu verlieren?

(function(a, c) { 
    var b = (function() { 
     var d = c(a.documentElement), 
      f = c(a.body), 
      e; 
     if (d.scrollTop()) { 
      return d 
     } else { 
      e = f.scrollTop(); 
      if (f.scrollTop(e + 1).scrollTop() == e) { 
       return d 
      } else { 
       return f.scrollTop(e) 
      } 
     } 
    }()); 
    c.fn.smoothScroll = function(d) { 
     d = ~~d || 600; 
     return this.find('a[href*="#"]').click(function(f) { 
      var g = this.hash, 
       e = c(g); 
      if (location.pathname.replace(/^\//, '') === this.pathname.replace(/^\//, '') && location.hostname === this.hostname) { 
       if (e.length) { 
        f.preventDefault(); 
        b.stop().animate({ 
         scrollTop: e.offset().top 
        }, d, function() { 
         location.hash = g 
        }) 
       } 
      } 
     }).end() 
    } 
}(document, jQuery)); 

Mein HTML:

<div class="container"> 
<br /> 
<br /> 
<br /> 
<br /> 
<div class="panel-group" id="accordion"> 
    <div class="faqHeader">General questions</div> 
    <div class="panel panel-default collapse"> 
     <div class="panel-heading"> 
      <h4 class="panel-title"> 
       <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">How fit and Experienced do I need to be for the Cycling Escapes?</a> 
      </h4> 
     </div> 
     <div id="collapseOne" class="panel-collapse collapse in"> 
      <div class="panel-body"> 
       No, you don’t need to be a pro to ride our Cycling Escapes. 
      </div> 
     </div> 
    </div> 

    <div class="panel panel-default"> 
     <div class="panel-heading"> 
      <h4 class="panel-title"> 
       <a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">How serious is the cycling?</a> 
      </h4> 
     </div> 
     <div id="collapseTwo" class="panel-collapse collapse"> 
      <div class="panel-body"> 
       Our Escapes are all about cycling, of course, but they are not stage races. 
      </div> 
     </div> 
    </div> 

    <div class="panel panel-default"> 
     <div class="panel-heading"> 
      <h4 class="panel-title"> 
       <a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseFourteen">Do I have to ride every day?</a> 
      </h4> 
     </div> 
     <div id="collapseFourteen" class="panel-collapse collapse"> 
      <div class="panel-body"> 
       Absolutely not. You can take as many days off as you want. 
      </div> 
     </div> 
    </div> 

    <div class="panel panel-default"> 
     <div class="panel-heading"> 
      <h4 class="panel-title"> 
       <a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseThree">Can you help me with my fitness preparation?</a> 
      </h4> 
     </div> 
     <div id="collapseThree" class="panel-collapse collapse"> 
      <div class="panel-body"> 
       Sure we can. 
      </div> 
     </div> 
    </div> 

    <div class="panel panel-default"> 
     <div class="panel-heading"> 
      <h4 class="panel-title"> 
       <a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseFour">Is there a minimum age requirement?</a> 
      </h4> 
     </div> 
     <div id="collapseFour" class="panel-collapse collapse"> 
      <div class="panel-body"> 
       Yes, there is. 
      </div> 
     </div> 
    </div> 


    <div class="panel panel-default"> 
     <div class="panel-heading"> 
      <h4 class="panel-title"> 
       <a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseFive">How big are the groups?</a> 
      </h4> 
     </div> 
     <div id="collapseFive" class="panel-collapse collapse"> 
      <div class="panel-body"> 
       The groups are limited to 16 riders. 
      </div> 
     </div> 
    </div> 
    <div class="panel panel-default"> 
     <div class="panel-heading"> 
      <h4 class="panel-title"> 
       <a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseSix">Can I rent a bike and/or a GPS navigation system with you?</a> 
      </h4> 
     </div> 
     <div id="collapseSix" class="panel-collapse collapse"> 
      <div class="panel-body"> 
       At the moment we cannot offer rentals for bikes or GPS navigation system. Sorry. 
      </div> 
     </div> 
    </div> 
    <br> 

    <div class="faqHeader">Accommodation</div> 
    <div class="panel panel-default"> 
     <div class="panel-heading"> 
      <h4 class="panel-title"> 
       <a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseSeven">Do I have to share my accomomodation with another rider?</a> 
      </h4> 
     </div> 
     <div id="collapseSeven" class="panel-collapse collapse"> 
      <div class="panel-body"> 
       All the prices of our Escapes are based on two people sharing a room. 
       <br /> 
      </div> 
     </div> 
    </div> 
    <div class="panel panel-default"> 
     <div class="panel-heading"> 
      <h4 class="panel-title"> 
       <a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseEight">Is my bike safely stored when I'm not riding?</a> 
      </h4> 
     </div> 
     <div id="collapseEight" class="panel-collapse collapse"> 
      <div class="panel-body"> 
       There are a number of reasons why you should join us: 
      </div> 
     </div> 
    </div> 
    <div class="panel panel-default"> 
     <div class="panel-heading"> 
      <h4 class="panel-title"> 
       <a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseSixteen">Can you accommodate special dietary needs?</a> 
      </h4> 
     </div> 
     <div id="collapseSixteen" class="panel-collapse collapse"> 
      <div class="panel-body"> 
       We will do our very best to ensure that your dietary needs are met. 
      </div> 
     </div> 
    </div> 
    <br> 
    <br> 

    <div class="faqHeader">Prices</div> 
    <div class="panel panel-default"> 
     <div class="panel-heading"> 
      <h4 class="panel-title"> 
       <a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseNine">How much does it cost?</a> 
      </h4> 
     </div> 
     <div id="collapseNine" class="panel-collapse collapse"> 
      <div class="panel-body"> 
       You can find the cost for the individual Escapes in the 'ESCAPES' section of the website. 
      </div> 
     </div> 
    </div> 
    <div class="panel panel-default"> 
     <div class="panel-heading"> 
      <h4 class="panel-title"> 
       <a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTen">What is included in the Escape price?</a> 
      </h4> 
     </div> 
     <div id="collapseTen" class="panel-collapse collapse"> 
      <div class="panel-body"> 
       <ul> 
        <li>Accommodation for 7 or 10 nights in a 3 to 5 star hotel.</li> 
       </ul> 
      </div> 
     </div> 
    </div> 

    <div class="panel panel-default"> 
     <div class="panel-heading"> 
      <h4 class="panel-title"> 
       <a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseThirteen">What is NOT included in the Escape price?</a> 
      </h4> 
     </div> 
     <div id="collapseThirteen" class="panel-collapse collapse"> 
      <div class="panel-body"> 
       <ul> 
        <li>Flights and/or train travels.</li> 
       </ul> 
      </div> 
     </div> 
    </div> 
    <br> 
    <div class="faqHeader">Bookings</div> 
     <div class="panel panel-default"> 
      <div class="panel-heading"> 
       <h4 class="panel-title"> 
        <a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseSeventeen">How do I book?</a> 
       </h4> 
      </div> 
      <div id="collapseSeventeen" class="panel-collapse collapse"> 
      <div class="panel-body"> 
      Bookings can be made via the 'BOOKINGS' section of the website. 
      </div> 
     </div> 
    </div> 
    <div class="panel panel-default"> 
     <div class="panel-heading"> 
      <h4 class="panel-title"> 
       <a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseEighteen">Can I cancel my booking?</a> 
      </h4> 
     </div> 
     <div id="collapseEighteen" class="panel-collapse collapse"> 
      <div class="panel-body"> 
      Of course you can. You can cancel your booking at any time, but be aware that charges will apply and refunds are based on a sliding scale. 
      </div> 
     </div> 
    </div> 
    <br> 
    <div class="faqHeader">Travel/Transportation</div> 
    <div class="panel panel-default"> 
     <div class="panel-heading"> 
      <h4 class="panel-title"> 
       <a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseEleven">Can you help me with travel arrangements?</a> 
      </h4> 
     </div> 
     <div id="collapseEleven" class="panel-collapse collapse"> 
      <div class="panel-body"> 
       Unfortunately, we are not able to help you with any travel arrangements outside our Escapes. 
      </div> 
     </div> 
    </div> 
    <div class="panel panel-default"> 
     <div class="panel-heading"> 
      <h4 class="panel-title"> 
       <a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwelve">Do I need travel insurance?</a> 
      </h4> 
     </div> 
     <div id="collapseTwelve" class="panel-collapse collapse"> 
      <div class="panel-body"> 
       Yes, we strongly recommend that you take out a travel insurance as this is not included in any of our Escape prices. 
      </div> 
     </div> 
    </div> 
    <div class="panel panel-default"> 
     <div class="panel-heading"> 
      <h4 class="panel-title"> 
       <a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseFifteen">What travel documents do I need?</a> 
      </h4> 
     </div> 
     <div id="collapseFifteen" class="panel-collapse collapse"> 
      <div class="panel-body"> 
       A passport or an identity card is the most obvious. 
      </div> 
     </div> 
    </div> 
    <br> 
    <div class="faqHeader">Hey!</div> 
    <div class="panel panel-default"> 
     <div class="panel-heading"> 
      <h4 class="panel-title"> 
       <a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseNineteen">Why didn't you answer my question?</a> 
      </h4> 
     </div> 
     <div id="collapseNineteen" class="panel-collapse collapse"> 
      <div class="panel-body"> 
      Sorry. So many questions, so many answers... 
      </div> 
     </div> 
    </div> 
</div> 
</div> 
<style> 
.faqHeader { 
    font-size: 27px; 
    margin: 15px; 
    text-transform: uppercase; 
} 

.panel-heading [data-toggle="collapse"]:after { 
    font-family: 'FontAwesome'; 
    content: "\f138"; /* "play" icon; old icon: Glyphicons Halflings, e072*/ 
    float: right; 
    color: #F58723; 
    font-size: 30px; 
    line-height: 27px; 
    /* rotate "play" icon from > (right arrow) to down arrow */ 
    -webkit-transform: rotate(-90deg); 
    -moz-transform: rotate(-90deg); 
    -ms-transform: rotate(-90deg); 
    -o-transform: rotate(-90deg); 
    transform: rotate(-90deg); 
} 

.panel-heading [data-toggle="collapse"].collapsed:after { 
    /* rotate "play" icon from > (right arrow) to^(up arrow) */ 
    -webkit-transform: rotate(90deg); 
    -moz-transform: rotate(90deg); 
    -ms-transform: rotate(90deg); 
    -o-transform: rotate(90deg); 
    transform: rotate(90deg); 
    color: #454444; 
} 

Answer 1

Sie können Bedingung hinzufügen, um zu überprüfen, wenn sie nicht die Klasse hat accordion-toggle mit den anderen Dingen in Ihrer Funktion fortzusetzen.

c.fn.smoothScroll = function(d) { 
    d = ~~d || 600; 
    return this.find('a[href*="#"]').click(function(f) { 
     if(!$(this).hasClass('accordion-toggle')) { 
      var g = this.hash, 
       e = c(g); 
      if (location.pathname.replace(/^\//, '') === this.pathname.replace(/^\//, '') && location.hostname === this.hostname) { 
       if (e.length) { 
        f.preventDefault(); 
        b.stop().animate({ 
         scrollTop: e.offset().top 
        }, d, function() { 
         location.hash = g 
        }) 
       } 
      } 
     } 
    }).end() 
}