单击时，Bootstrap轮播会向上移动

Question

我很困惑，为什么我的页面或我的旋转木马在我第一次点击时会向上移动？这是我的代码，我是从Bootstrap获得的。

#tips #carousel-example {
  margin: auto;
  width: 900px;
}

#tips {
  background-color: #fcb595;
  max-height: 100%;
}

<div id="tips">
  <div id="carousel-example" class="carousel slide" data-ride="carousel">
    <ol class="carousel-indicators">
      <li data-target="#carousel-example" data-slide-to="0" class="active"></li>
      <li data-target="#carousel-example" data-slide-to="1"></li>
      <li data-target="#carousel-example" data-slide-to="2"></li>
      <li data-target="#carousel-example" data-slide-to="3"></li>
    </ol>

    <div class="carousel-inner">
      <div class="item active">
        <a href="#"><img src="images/tips/tip1.jpg" /></a>
      </div>
      <div class="item">
        <a href="#"><img src="images/tips/tip1.jpg" /></a>
      </div>
      <div class="item">
        <a href="#"><img src="images/tips/tip1.jpg" /></a>
      </div>
      <div class="item">
        <a href="#"><img src="images/tips/tip1.jpg" /></a>
      </div>
      <div class="item">
        <a href="#"><img src="images/tips/tip1.jpg" /></a>
      </div>
    </div>

    <a class="left carousel-control" href="#carousel-example" data-slide="prev">
      <span class="glyphicon glyphicon-chevron-left"></span>
    </a>
    <a class="right carousel-control" href="#carousel-example" data-slide="next">
      <span class="glyphicon glyphicon-chevron-right"></span>
    </a>
  </div>
</div>

这是一个显示我的意思的gif：

Answer 1

尝试将控件中的href替换为data-target：

<a class="left carousel-control" data-target="#carousel-example" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" data-target="#carousel-example" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right"></span>
</a>

Answer 2

我今天发现了这个问题，尽管已经晚了，我将为将来的访客回答这个问题。

大多数开发人员都使用某些脚本为目标元素设置动画，就像我也这样做的那样。我可以在动画图像中看到同样的问题。

$('a[href^="#"]').on('click', function(e) {
  e.preventDefault();
  //... some logic
  // eg.
  $('html, body').animate({
    scrollTop: $(this).offset().top - 100
  }, 1000, 'swing');
});

这是轮播点击引起问题的原因。因此，为避免此类问题，您只需在轮播控件上返回点击即可。

$('a[href^="#"]').on('click', function(e) {
  if ($(this).data('slide')) return;
  e.preventDefault();
});