【问题标题】:Twitter Bootstrap Carousel keeps moving up when sliding control left or rightTwitter Bootstrap Carousel 在向左或向右滑动控件时不断向上移动
【发布时间】:2015-05-27 11:35:14
【问题描述】:

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

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

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

我该如何纠正这个问题?

【问题讨论】:

    标签: javascript jquery css twitter-bootstrap twitter-bootstrap-3


    【解决方案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;
          });
        });
      }
    }
    

    });

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

    【讨论】:

    • 但是我正在将图像加载到幻灯片中,并且由于它需要响应并且应该按比例缩放,因此我无法定义固定高度。所有图像都具有相同的大小,因此高度是给定的/固定的。
    • @rainerbrunotte 很抱歉,我无法提供更多帮助,如果没有问题的现场示例,我不难理解 - 您的问题可能有多个解决方案,但如果没有示例
    • 我添加了上面的示例链接,谢谢!您会看到,当您在页面上一直向上滚动,然后使用轮播滑块向左向右导航时,整个轮播会向上移动,直到碰到浏览器顶部
    • @rainerbrunotte - 我已经更新了我的答案 - 希望对你有所帮助
    • 太棒了!有用!这就是问题所在!好吧,我不知道为什么我将它链接到每个 A 元素,我只是在我的网站上获取另一个滚动条的代码,并没有注意它实际上也影响了其他 A 链接!哈哈!感谢那! :)
    【解决方案2】:

    href="#carousel-branding-project" 在轮播的 HTML 定义中导致您的页面链接到 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>
    

    【讨论】:

    • 谢谢!但是它不起作用......我直接从这里获取了原始代码:getbootstrap.com/javascript/#carousel,它没有向上移动......
    • 它必须是您页面上的其他脚本之一。尝试使用复制问题所需的最少代码创建 JSFiddle,以便我们将其隔离。
    • 是的,实际上是这样,我的网站另一部分的另一个 JS 脚本搞砸了,见上文!不过感谢您的帮助!
    猜你喜欢
    • 2019-02-07
    • 2012-12-17
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2011-03-29
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多