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:

<         


        

Answer 1

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 [];
          }

Answer 2

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

Answer 3

We spent quite a lot of time on this but setting the data-target attribute and other solutions did not work for us. The scroll-up/jumping of the page was happening irrespective.

This seems to happen with Bootstrap3 carousels where each slide is of different height. @Fabian's comment above helped us. For those who missed it, adding overflow:hidden to the carousel class is a good hack to fix this:

@media (min-width: 768px)
{
    #our-carousel
    {
      overflow: hidden;    /* workaround to resolve the page jumping/scrolling up on 
                              smaller screens on auto/manual advancing of 
                              carousel */
    }
}

Answer 4

When you link to an HTML anchor, it will be relative to where the <div id="myCarousel"> is, which by default with Twitter Bootstrap, is located at the top of the carousel. I see that your using the data- tags, therefore I don't believe there is a need for the href attributes.

Change this:

<!-- 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>

to this:

<!-- Carousel nav --> 
<a class="carousel-control left" data-slide="prev">&lsaquo;</a>
<a class="carousel-control right" data-slide="next">&rsaquo;</a> 
</div>

Currently I'm not at the office, so I haven't had time to test it in more than 1 scenario, however, from the looks, it should still work & give you your desired results.

Answer 5

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

Answer 6

href="#myCarousel" is looking for <a name='myCarousel'></a> and trying to move the window to that position.

try setting your href to href="javascript:void(0)"