Smooth Scroll Interfering with Prev and Next on Carousel in Bootstrap 3 - button

Question

I was originally having problems with the below JS smooth scroll as it made any real links rather then #location stop working.
$('.navbar-nav > li').click(function(event) {
event.preventDefault();
var target = $(this).find('>a').prop('hash');
$('html, body').animate({
scrollTop: $(target).offset().top
}, 500);
});
So I changed it to
$(document).ready(function(){
$('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) {
var targetOffset = $target.offset().top;
$('html,body')
.animate({scrollTop: targetOffset}, 1200);
return false;
}
}
});
});
Which sorted the original problem of being unable to add a working "blog" link in the navbar however it has now rendered the left and right (next and prev) carousel buttons not working.
I would be grateful if someone can help me out with this as it is driving me crazy.
The html for the carousel is as follows
<section id="main-slider" class="carousel">
<div class="carousel-inner">
<div class="item active">
<div class="container">
<div class="carousel-content">
<h1>Responsive Website Design</h1>
<p class="lead">With 20% of all website traffic in the UK coming from tablets and smart phones then never before has it been a better time to have a responsive website.</p>
</div>
</div>
</div><!--/.item-->
<div class="item">
<div class="container">
<div class="carousel-content">
<h1>Free Consultation</h1>
<p class="lead">I understand every business has different needs so we can discuss what it is your want to achieve and using my expert advice make it a reality.</p>
</div>
</div>
</div><!--/.item-->
<div class="item">
<div class="container">
<div class="carousel-content">
<h1>Built to be SEO/Google Friendly</h1>
<p class="lead">Having a website built is the first step but next you need to put it in front of your target audience. On site SEO is where it all begins.</p>
</div>
</div>
</div><!--/.item-->
</div><!--/.carousel-inner-->
<a class="prev" href="#main-slider" data-slide="prev"><i class="icon-angle-left"></i></a>
<a class="next" href="#main-slider" data-slide="next"><i class="icon-angle-right"></i></a>
</section><!--/#main-slider-->

Answer 1

First of all, the answers above are correct. I just wanted to spell it out a little clearer for anyone needing help.
The code that needs to be updated is the SmoothScroll function itself. You will need to know the ID of the carousel from your bootstrap page. Just add the carousel ID to the not().click function and it will work like a charm. Here is an example of what I did. The change was made on the third line of code, where you see the carousel ID#.
<script>
$(function() {
$('a[href*=#]:not([href=#carousel-299058])').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 - 70
}, 500);
return false;
}
}
});
});
</script>

Answer 2

Try replacing this:
$('a[href*=#]:not([href=#])').click(function() {
with:
$('a[href*=#]:not([href=#media])').click(function () {
Happy coding!

Answer 3

I was using the smooth scrolling javascript everyone uses and having the same issue, like all obedient little developers out there I was using #myCarousel:
<a class="right carousel-control" href="#myCarousel" data-slide="next">
and as soon as I changed [href=media] to [href=myCarousel] my Bootstrap carousel controls started working again.

Answer 4

I had this issue recently and my solution was to use a class on each link as opposed to the href attribute selectors within the jQuery function.
This does mean a little extra HTML mark-up but I felt it was more robust and causes less interference with additional scripts that may be added within your project.
So this:
$('a[href*=#]:not([href=#])').click(function() {
Becomes this:
$('.your-class-name').click(function() {
And any smooth scrolling links you add to your page will become:
Link
And scroll to:
<div id="section">... Content ...</div>

Answer 5

Dont forget to add : \\. It is necessary to add it since the latest version of JQUERY.
$('a[href*=\\#]:not([href=\\#carousel-299058])').click(function() {