Smooth scrolling Bootstrap 3

问题

I am having some issue trying to have a smooth scroll in my page, basically I have anchor tags around a page like this:

<li><a href="#description">Module Description</a></li>
...
<section id=" description ">

And I am using the following javascript that works fine, but the problem is that if I use this script, the modal and other features of bootstrap 3 breaks and doesn’t work anymore

  $('a[href*=#]:not([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
    }, 1000);
    return false;
  }
}
}); 

I am wondering what could be a solution to this script or there is other similar script that is tested with bootstrap 3 Thanks

回答1:

$('a[href*=#]:not([href=#])') will be very generic will also change the target anchors for by example the modal. Try to make it less generic:

<ul id="insidepagenav">
<li><a href="#description">Module Description</a></li>

$('ul#insidepagenav > li > a[href*=#]:not([href=#])')

回答2:

If you replace

a[href*=#]:not([href=#])

with

a[href*=#]:not([href=#]):not([href=#idname])

you can prevent the smooth scrolling from working for that one specific link

来源：https://stackoverflow.com/questions/19263600/smooth-scrolling-bootstrap-3