CODEWITHSUNDEEP
javascriptjquerycssjquery-selectorstwitter-bootstrap-3
Sebastian Zeb
Sebastian Zeb

Reputation: 11

Bootstrap 3 and ScrollTop function: #link conflict

I am using BootStrap 3 to build a single page site. To move to the different parts of the page, I find Smooth Scrolling function at http://css-tricks.com/snippets/jquery/smooth-scrolling/ and it works fine.

$(function() {
  $('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;
      }
    }
  });
});

Smooth Scrolling detect the links starting with # <a href="#zone">Scroll to Section Zone</a>

But links starting with # also used in Bootstrap Carousel
data-target="#myCarousel"
So the buttons to move to prev/next slide in the slideshow behave in a wird way.

I have close to no knowledge of Javascript but I realized that the second line of the code was about the links to avoid: so I put "#myCarousel" in that part. Following you can find the edited second line:

  $('a[href*=#]:not([href=#],"#myCarousel")').click(function() {

My solution (very surprising!) works... almost works!
There are only one more issue: the scrolling is NOT anymore smooth.
Clicking on the button the page jump on the target link.

Any idea why is no more smooth?

Solution Found

Thanks for all answers.
Before posting this request, I made my searches jquery api

I find a solution: now the second line read
$('a[href*=#]').not("[href=#], [href=#myCarousel]").click(function() {

Upvotes: 1

Views: 861

Answers (2)

Sunny R Gupta
Sunny R Gupta

Reputation: 5126

The problem here is that your selector is not working fine.

If you open up your console window and try to write:

$('a[href*=#]:not([href=#],"#myCarousel")')

you will see that the result is an error, due to this, the smoothscrolling functionality is not working and the default behaviour of directly showing the links is kicking-in.

Read more about the jQuery Sizzle engine's .not() selector here.

Try :

$('a[href*=#]').not('[href=#]','#myCarousel').click(function() {

This selects the following links:

  1. All a tags containing # within them.
  2. Not having the href set directly to #
  3. Not located within #myCarousel

Upvotes: 0

Sebsemillia
Sebsemillia

Reputation: 9476

You destroyed the javascript function because your :not selector is written wrong. Therefore the smooth scroll doesn't work anymore. Try doing it this way:

$('a[href*=#]:not(#myCarousel)').click(function() {

Read more about the :not CSS selector here

Upvotes: 1

Related Questions