Twitter Bootstrap Carousel 在向左或向右滑动控制时不断向上移动

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

本文关键字:控制 移动 Carousel Bootstrap Twitter      更新时间:2023-09-26

每次我使用左侧或右侧的控件导航/滑动时,我的引导程序 3.3 轮播(代码直接取自 getbootstrap.com(都会不断移动到浏览器顶部。

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

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

我该如何纠正此问题?

这是导致网络向上滚动的代码:

$('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;
      });
    });
  }
}

}(;

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

播的HTML定义中的href="#carousel-branding-project"会导致您的页面链接到id="carousel-branding-project",这是轮播的父div。

如果您需要将其作为锚点,请尝试将链接更改为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>