CODEWITHSUNDEEP
jquerytwitter-bootstrap
Meek
Meek

Reputation: 3348

Make exception to smooth scrolling script

I'm using this script to make smooth scrolling on a page with a lot of anchors. But when I'm adding Bootstrap's accordions, they don't work (they don't collapse/expand) due to this script.

How can I make some adjustments to the script, so that it doesn't collide with the accordions collapsing/expanding?

$('a[href*="#"]').click(function() {
  if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
    var target = $(this.hash);
    target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
    if (target.length) {
      $('html, body').animate({
        scrollTop: target.offset().top
      }, 500);
      return false;
    }
  }
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<div id="stats" role="tablist" aria-multiselectable="true">
  <div class="card stats">
    <h4 class="card-header" role="tab" id="statsHeading">
      <a data-toggle="collapse" data-parent="#stats" href="#collapseStats" aria-expanded="false">Header</a></h4>
    <div id="collapseStats" class="collapse" role="tabpanel" aria-labelledby="statsHeading">
      <div class="card-block">
        Content...
      </div>
    </div>
  </div>
</div>

Fiddle here.

Upvotes: 1

Views: 388

Answers (2)

Abhijeet
Abhijeet

Reputation: 819

Update your html code with my code and problem will solve. please check and confirm. Here I just make changes in tag if you check my code and I hope then you understand what is the issue :) 

    <div id="stats" role="tablist" aria-multiselectable="true">
  <div class="card stats">
    <h4 class="card-header" role="tab" id="statsHeading">
      <a data-toggle="collapse" data-parent="#stats" href="javascript:void(0)" data-target="#collapseStats" aria-expanded="false">Header</a></h4>
    <div id="collapseStats" class="collapse" role="tabpanel" aria-labelledby="statsHeading">
      <div class="card-block">
        Content...
      </div>
    </div>
  </div>
</div>

Upvotes: 0

vi5ion
vi5ion

Reputation: 1028

If you add a class accordion to the Bootstrap accordion links you can then exclude this from the selection in your scrolling function by using .not().

HTML

<a class="accordion" data-toggle="collapse" data-parent="#stats" href="#collapseStats" aria-expanded="false">Header</a>

JS

$('a[href*="#"]').not('.accordion').click(function() { ... });

Upvotes: 2

Related Questions