Twitter Bootstrap 向左或向右滑动控件时轮播不断向上移动

Question

我的 bootstrap 3.3 旋转木马（直接从 getbootstrap.com 获取的代码）每次我 navigate/slide 将控件向左或向右时，都会一直向上移动到浏览器顶部。

因此，如果轮播位于页面中间，并且您开始手动滑动，它会将整个页面向上移动，直到轮播到达浏览器顶部。

此处示例：http://crevisio.com/branding/pLXAsNJdn

我该如何纠正？

Answer 1

这是导致网页向上滚动的代码：

$('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}, 800, function() { // <== DISABLE THIS AND THE NEXT 2 LINES
        location.hash = target;
      });
    });
  }
}

});

问题是 - 为什么要将点击事件绑定到每个具有包含 # 的 href 属性的 A 元素？

Answer 2

轮播的 HTML 定义中的

href="#carousel-branding-project" 导致您的页面 link 编辑为 id="carousel-branding-project"，这是轮播的父级 div .

如果您需要它作为锚点，请尝试将 link 更改为 href="javascript:void(0)"

  <a class="left carousel-control" href="javascript:void(0)"role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left"></span>
  </a>
  <a class="right carousel-control" href="javascript:void(0)" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right"></span>
  </a>

Twitter Bootstrap 向左或向右滑动控件时轮播不断向上移动

Twitter Bootstrap Carousel keeps moving up when sliding control left or right

javascript

css

jquery

twitter-bootstrap

twitter-bootstrap-3