Bootstrap Carousel Jumps to top of page when advancing

Question

When I advance the slider manually, the slider jumps to the top of the page. How can I prevent this from happening? Help much appreciated! Here's the code:

<div class="row">
    <div class="span12"> 
        <script>
            $('.carousel').carousel({
            interval: 4000
            })
        </script>
        <div class="container">
            <div id="myCarousel" class="carousel slide frame"> 
                <!-- Carousel items -->
                <div class="carousel-inner">
                    <div class="active item"><a href="work.html"><img src="assets/images/slide_psd.jpg" width="1170"  alt="wga"></a></div>
                    <div class="item"><a href="work.html"><img src="assets/images/slide_wga.jpg" width="1170"  alt="wga"></a></div>
                    <div class="item"><a href="work.html"><img src="assets/images/slide_ts.jpg" width="1170"  alt="top secret hair"></a></div>
                    <div class="item"><a href="work.html"><img src="assets/images/slide_baja.jpg" width="1170"  alt="baja"></a></div>
                </div>
                <!-- Carousel nav --> 
                <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
        <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a> 
            </div>
        </div>
        <!-- end cara container--> 
    </div>
    <!-- end span--> 
</div>
<!-- end row-->

Solution 1

You can add data-target attribute refering to your carousel: data-target="#carousel"

Solution 2

You can either do this inline (less clean) :

<a class="left carousel-control" role="button" data-slide="prev" 
  onclick="$(this).closest('.carousel').carousel('prev');">
  <span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" role="button" data-slide="next"  
  onclick="$(this).closest('.carousel').carousel('next');">
  <span class="glyphicon glyphicon-chevron-right"></span>
</a>

or you can do globally assuming you remove the href="#controlid :

$('body').on('click','.carousel-control',function() {
   $(this).closest('.carousel').carousel( $(this).data('slide') );
});

or you can do it individually by being more specific in your selector

$('body').on('click','#carouselID .carousel-control',function() {
   $(this).closest('.carousel').carousel( $(this).data('slide') );
});

Solution 3

It turns out there was a smooth page jump script for another page that was causing this issue. It works after I moved out the the following from custom.js:

  function filterPath(string) {
    return string
    .replace(/^\//,'')
    .replace(/(index|default).[a-zA-Z]{3,4}$/,'')
    .replace(/\/$/,'');
  }
  var locationPath = filterPath(location.pathname);
  var scrollElem = scrollableElement('html', 'body');

  $('a[href*=#]').each(function() {
    var thisPath = filterPath(this.pathname) || locationPath;
    if (  locationPath == thisPath
      && (location.hostname == this.hostname || !this.hostname)
      && this.hash.replace(/#/,'') ) {
      var $target = $(this.hash), target = this.hash;
    if (target) {
      var targetOffset = $target.offset().top;
      $(this).click(function(event) {
        event.preventDefault();
        $(scrollElem).animate({scrollTop: targetOffset}, 400, function() {
          location.hash = target;
        });
      });
    }
  }
});

  // use the first element that is "scrollable"
  function scrollableElement(els) {
    for (var i = 0, argLength = arguments.length; i <argLength; i++) {
      var el = arguments[i],
      $scrollElement = $(el);
      if ($scrollElement.scrollTop()> 0) {
        return el;
      } else {
        $scrollElement.scrollTop(1);
        var isScrollable = $scrollElement.scrollTop()> 0;
        $scrollElement.scrollTop(0);
        if (isScrollable) {
          return el;
        }
      }
    }
    return [];
          }

Solution 4

you should try with jquery:

$('.carousel-control').click(function (e) {
  e.preventDefault();
});

Solution 5

This one worked well for me. Replace href with "data-target" <a class="carousel-control right" data-slide="next" data-target="#carousel">

View more solutions

Comments

[Thomas]

I think this would have worked but it appears that the hrefs are necessary for the slider nav to work. I tried removing them but breaks the nav buttons.

[Thomas]

Yeah, I noticed this behavior didn't occur on the bootstrap example site either. One thing I noticed is that in your example, when you click to advance, the href value doesn't appear in the url. On mine, "/#myCarousel" gets appended like a normal href link.

[Thomas]

Yeah, I noticed this behavior didn't occur on the bootstrap example site either. One thing I noticed is that in your example, when you click to advance, the href value doesn't appear in the url. On mine, "/#myCarousel" gets appended like a normal href link.

[1234567]

@user1810801 They shouldn't be needed, as the data- tag specifies the relational link to them.

[Damainman]

This works for me on firefox, but does not work on chrome. When using inspector in chrome, it doesn't even show that it sees data-target or data-slide

[Fabian Brenes]

I ended up adding a overflow: hidden; to the carousel class which did the trick.

[Anupam]

@FabianBrenes - your workaround is the only thing that worked for us. Do you want to post it as an answer? I'll remove my answer if you do - thanks!