Twitter Bootstrap走马灯在向左或向右滑动控制时会持续上移。

Question

我的Bootstrap 3.3轮播（代码直接从getbootstrap.com获取）每次我使用控制向左或向右导航/滑动时都会移动到浏览器顶部。

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

如下示例链接: http://crevisio.com/branding/pLXAsNJdn 我该如何纠正这个问题？

- rainerbrunotte

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元素上？});

- Alon Eitan

---

但是我正在将图像加载到幻灯片中，由于它需要响应式并且应按比例缩放，因此我无法定义固定高度。所有图像都具有相同的大小，因此高度本身是给定/固定的。 - rainerbrunotte

@rainerbrunotte 很抱歉我无法提供更多帮助，没有实时问题示例很难理解 - 你的问题可能有不止一种解决方案，但是没有示例太过模糊。 - Alon Eitan

我在上面添加了示例链接，谢谢！当您在页面上向上滚动，然后使用走马灯滑块向左或向右导航时，整个走马灯会向上移动，直到它碰到浏览器顶部。 - rainerbrunotte

@rainerbrunotte - 我已经更新了我的答案 - 希望它能帮到你。 - Alon Eitan

太棒了！它运行了！那就是问题所在！不过，我不知道为什么我将其链接到每个A元素，我只是拿了网站上另一个滚动条的代码，没有注意到它实际上也影响了其他A链接！哈哈！谢谢你！ :) - rainerbrunotte

Answer 2

在你的轮播 HTML 定义中，href="#carousel-branding-project" 导致你的页面链接到你的轮播的父 div 的 id="carousel-branding-project"。如果你需要它成为一个锚点，请尝试将链接更改为 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>

- Mark Polivchuk

---

谢谢！但是它不起作用...我直接从这里获取了原始代码：http://getbootstrap.com/javascript/#carousel，在那里它不会向上移动... - rainerbrunotte

这可能是由于页面上其他脚本中的某些问题导致的。请尝试创建一个 JSFiddle，使用最少量的代码来复制该问题，以便我们可以隔离它。 - Mark Polivchuk

是的，实际上是这样的，我有另一个JS脚本用于网站的另一部分，它搞砸了它，可以看到上面的情况！不过还是谢谢你的帮助！ - rainerbrunotte