Javascript 前进时，引导转盘跳到页面顶部

当我手动推进滑块时，滑块会跳到页面顶部。我怎样才能防止这种情况发生？非常感谢您的帮助！代码如下：

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

$（'.carousel'）。carousel({
间隔时间：4000
})

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

---

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

当您链接到HTML锚定时，它将相对于

所在的位置，Twitter引导默认位于旋转木马的顶部。我看到您正在使用

数据-

标记，因此我认为不需要

href

属性

更改此项：

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

为此：

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

&伊萨库；
&rsaquo；

目前我不在办公室，所以我没有时间在多个场景中测试它，但是，从外观上看，它应该仍然有效，并提供您想要的结果。

href=“#myCarousel”

正在寻找

并尝试将窗口移动到该位置

---

尝试将href设置为

href=“javascript:void（0）”

结果表明，另一个页面存在平滑的页面跳转脚本，导致了此问题。在我从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 [];
          }

函数过滤器路径（字符串）{
返回字符串
.替换（/^\/，''）
.replace（/（索引|默认值）。[a-zA-Z]{3,4}$/，“”）
.替换（/\/$/，''）；
}
var locationPath=filterPath（location.pathname）；
var scrolleem=scrollableElement（'html'，'body'）；
$（'a[href*=#]'）。每个（函数（）{
var thisPath=filterPath（this.pathname）| | locationPath；
如果（locationPath==此路径
&&（location.hostname==this.hostname | |！this.hostname）
&&this.hash.replace（/#/，''）{
var$target=$（this.hash），target=this.hash；
如果（目标）{
var targetOffset=$target.offset（）.top；
$（此）。单击（函数（事件）{
event.preventDefault（）；
$（scrollElem）.animate（{scrollTop:targetOffset}，400，function（）{
location.hash=目标；
});
});
}
}
});
//使用第一个“可滚动”的元素
函数可滚动元素（els）{
for（var i=0，argLength=arguments.length；i 0）{
返回el；
}否则{
$scrollElement.scrollTop（1）；
变量isScrollable=$scrollElement.scrollTop（）>0；
$scrollElement.scrollTop（0）；
如果（可循环使用）{
返回el；
}
}
}
返回[]；
}

将href设置为

href=“javascript:void（0）”

然后将其添加到js中的某个位置：

$('.carousel-control.right').click(function(){ $('.carousel').carousel('next')});
$('.carousel-control.left').click(function(){ $('.carousel').carousel('prev')});

---

您应该尝试使用jquery：

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

---

我也有同样的问题

我的a标签看起来像：

<a class="carousel-control right" data-mixpanel-tracker="Slider Next" data-slide="next" href="#carousel">

通过删除标记中的额外混合面板属性解决了此问题：

<a class="carousel-control right" data-slide="next" href="#carousel">

---

很抱歉，它无法解决您的问题，但它可能会帮助其他有类似问题的人。

您可以在线执行此操作（不太干净）：

或者，您也可以通过在选择器中更具体地单独执行此操作

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

---

您可以添加数据目标属性，该属性引用您的旋转木马：data target=“#carousel”

这一个对我很有效。将href替换为“数据目标”

---

我们在这方面花了很多时间，但设置

数据目标

属性和其他解决方案并不适合我们。页面的向上滚动/跳跃正在发生

这似乎发生在Bootstrap3转盘上，其中每个幻灯片的高度不同@费边的上述评论对我们有所帮助。对于那些错过它的人来说，在carousel类中添加overflow:hidden是一个很好的解决方法：

@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 */
    }
}

---

我最后添加了一个溢出：隐藏；我发现用

数据目标=

替换指示器按钮锚定标记中的HTML属性

href=

，缓解了页面跳转问题

<a class="carousel-control-prev" data-target="#carouselExampleIndicators" role="button" data-slide="prev">
<a class="carousel-control-next" data-target="#carouselExampleIndicators" role="button" data-slide="next">

我认为这会起作用，但看来，要使滑块导航正常工作，HREF是必要的。我试图删除它们，但弄坏了导航按钮。@user1810801不需要它们，因为

data-

标记指定了指向它们的关系链接。是的，我注意到引导示例站点上也没有出现这种行为。我注意到的一件事是，在您的示例中，当您单击前进时，href值不会出现在url中。在我的网站上，“/#myCarousel”像普通的href链接一样被追加。这是代码的上下文是的，我注意到这种行为在引导示例网站上也没有发生。我注意到的一件事是，在您的示例中，当您单击前进时，href值不会出现在url中。在我的浏览器上，“/#myCarousel”像普通的href链接一样被追加。这在firefox上对我有效，但在chrome上不起作用。当在chrome中使用inspector时，它甚至没有显示它看到了数据目标或数据幻灯片，结果添加了一个溢出：隐藏；给做了这个把戏的carousel类。@FabianBrenes-你的变通方法是唯一对我们有效的方法。你想把它作为答案发布吗？如果你这样做，我会移除-谢谢！

@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 */
    }
}

<a class="carousel-control-prev" data-target="#carouselExampleIndicators" role="button" data-slide="prev">
<a class="carousel-control-next" data-target="#carouselExampleIndicators" role="button" data-slide="next">