How to make carousel and scrolling animation work together on single web page

Question

I have single web page, and I use scroll animation function to move between sections wich is this one

$(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
                }, 2000);
                return false;
            }
        }
    });

});

It is all working fine, when I click on my menu let's say contact link scroll animation do it's job and smoothley takes me to contact section. Then I add carousel for sliding images, this code

$(document).ready(function() {
  $('#media').carousel({
    pause: true,
    interval: false,
  });
});

but it wont work aslong as scrolling function is in my js file, when I remove scroll animation function my carousel work just fine. Is there a way to make them work together. Any help would be appreciated.

And here is HTML

<div class="container">
  <div class="row">
    <h2>Media Slider Carousel BS3</h2>
  </div>
  <div class='row'>
    <div class='col-md-12'>
      <div class="carousel slide media-carousel" id="media">
        <div class="carousel-inner">
          <div class="item  active">
            <div class="row">
              <div class="col-md-4">
                <a class="thumbnail" href="#"><img alt="" src="http://placehold.it/150x150"></a>
                <p>sportska masaža</p>
              </div>          
              <div class="col-md-4">
                <a class="thumbnail" href="#"><img alt="" src="http://placehold.it/150x150"></a>
              </div>
              <div class="col-md-4">
                <a class="thumbnail" href="#"><img alt="" src="http://placehold.it/150x150"></a>
              </div>        
            </div>
          </div>
          <div class="item">
            <div class="row">
              <div class="col-md-4">
                <a class="thumbnail" href="#"><img alt="" src="http://placehold.it/150x150"></a>
              </div>          
              <div class="col-md-4">
                <a class="thumbnail" href="#"><img alt="" src="http://placehold.it/150x150"></a>
              </div>
              <div class="col-md-4">
                <a class="thumbnail" href="#"><img alt="" src="http://placehold.it/150x150"></a>
              </div>        
            </div>
          </div>
          <div class="item">
            <div class="row">
              <div class="col-md-4">
                <a class="thumbnail" href="#"><img alt="" src="http://placehold.it/150x150"></a>
              </div>          
              <div class="col-md-4">
                <a class="thumbnail" href="#"><img alt="" src="http://placehold.it/150x150"></a>
              </div>
              <div class="col-md-4">
                <a class="thumbnail" href="#"><img alt="" src="http://placehold.it/150x150"></a>
              </div>      
            </div>
          </div>
        </div>
        <a data-slide="prev" href="#media" class="left carousel-control">‹</a>
        <a data-slide="next" href="#media" class="right carousel-control">›</a>
      </div>                          
    </div>
  </div>
</div> 

Answer 1

You have to write a condition, that your carousel links are not effected from your scroll function:

if($(this).parents('#media').length == 0)

Let's have a look:

 $(function() { $('a[href*=#]:not([href=#])').click(function(e) { if($(this).parents('#media').length == 0) { 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 }, 2000); return false; } } } }); $('#media').carousel({ pause: true, interval: false, }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <div class="container"> <div class="row"> <h2>Media Slider Carousel BS3</h2> </div> <div class='row'> <div class='col-md-12'> <div class="carousel slide media-carousel" id="media"> <div class="carousel-inner"> <div class="item active"> <div class="row"> <div class="col-md-4"> <a class="thumbnail" href="#"><img alt="" src="http://placehold.it/150x150"></a> <p>sportska masaža</p> </div> <div class="col-md-4"> <a class="thumbnail" href="#"><img alt="" src="http://placehold.it/150x150"></a> </div> <div class="col-md-4"> <a class="thumbnail" href="#"><img alt="" src="http://placehold.it/150x150"></a> </div> </div> </div> <div class="item"> <div class="row"> <div class="col-md-4"> <a class="thumbnail" href="#"><img alt="" src="http://placehold.it/150x150"></a> </div> <div class="col-md-4"> <a class="thumbnail" href="#"><img alt="" src="http://placehold.it/150x150"></a> </div> <div class="col-md-4"> <a class="thumbnail" href="#"><img alt="" src="http://placehold.it/150x150"></a> </div> </div> </div> <div class="item"> <div class="row"> <div class="col-md-4"> <a class="thumbnail" href="#"><img alt="" src="http://placehold.it/150x150"></a> </div> <div class="col-md-4"> <a class="thumbnail" href="#"><img alt="" src="http://placehold.it/150x150"></a> </div> <div class="col-md-4"> <a class="thumbnail" href="#"><img alt="" src="http://placehold.it/150x150"></a> </div> </div> </div> </div> <a data-slide="prev" href="#media" class="left carousel-control">‹</a> <a data-slide="next" href="#media" class="right carousel-control">›</a> </div> </div> </div> </div>