CODEWITHSUNDEEP
javascriptjquerytwitter-bootstraptwitter-bootstrap-3
Manza
Manza

Reputation: 2141

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

Upvotes: 0

Views: 5445

Answers (2)

bradhoov
bradhoov

Reputation: 3

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

Upvotes: 0

Bass Jobsen
Bass Jobsen

Reputation: 49044

$('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=#])')

Upvotes: 4

Related Questions