Bootstrap Carousel在推进时跳转到页面顶部

Question

当我手动前进滑块时,滑块会跳到页面顶部.我怎样才能防止这种情况发生？非常感谢!这是代码:

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

Answer 1

您可以添加引用您的轮播的数据目标属性:data-target ="#carousel"

Answer 2

你可以内联(不太干净):

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

或者你可以做全局假设你删除href ="#controlid:

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

或者您可以通过在选择器中更具体来单独完成

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

Answer 3

我试图为此制定一份工作文件。我没有看到跳跃行为。没有做任何异常的事情，只是复制您的标记，添加示例图像、bootstrap.js、bootstrap-carosel.js 和 bootstrap.css

http://brandonam.com/bootTest/boot.html

仅供参考：“#myCarousel”的典型浏览器行为是将窗口焦点指向标记为“#myCarousel”的元素...但我认为 bootstrap 默认情况下会阻止这种情况。不应该四处走动。