Bootstrap Carousel 前进时跳转到页面顶部

Posted 2023-02-22

【中文标题】Bootstrap Carousel 前进时跳转到页面顶部

【英文标题】：Bootstrap Carousel Jumps to top of page when advancing

【发布时间】：2013-08-03 02:21:22

【问题描述】：

当我手动推进滑块时，滑块会跳到页面顶部。我怎样才能防止这种情况发生？非常感谢帮助！代码如下：

<div class="row">
    <div class="span12"> 
        <script>
            $('.carousel').carousel(
            interval: 4000
            )
        </script>
        <div class="container">
            <div id="myCarousel" class="carousel slide frame"> 
                <!-- Carousel items -->
                <div class="carousel-inner">
                    <div class="active item"><a href="work.html"><img src="assets/images/slide_psd.jpg"   ></a></div>
                    <div class="item"><a href="work.html"><img src="assets/images/slide_wga.jpg"   ></a></div>
                    <div class="item"><a href="work.html"><img src="assets/images/slide_ts.jpg"   ></a></div>
                    <div class="item"><a href="work.html"><img src="assets/images/slide_baja.jpg"   ></a></div>
                </div>
                <!-- Carousel nav --> 
                <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
        <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a> 
            </div>
        </div>
        <!-- end cara container--> 
    </div>
    <!-- end span--> 
</div>
<!-- end row-->

【问题讨论】：

这里是代码link的上下文

【参考方案1】：

您可以添加引用轮播的 data-target 属性：data-target="#carousel"

【讨论】：

这适用于我在 Firefox 上，但不适用于 chrome。在 chrome 中使用检查器时，它甚至没有显示它看到了 data-target 或 data-slide

我最终添加了一个溢出：隐藏；到成功的轮播类。

@F***Brenes - 您的解决方法是唯一对我们有用的方法。您想将其发布为答案吗？如果你这样做，我会删除 my answer - 谢谢！

【参考方案2】：

您可以内联执行此操作（不太干净）：

<a class="left carousel-control" role="button" data-slide="prev" 
  onclick="$(this).closest('.carousel').carousel('prev');">
  <span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" role="button" data-slide="next"  
  onclick="$(this).closest('.carousel').carousel('next');">
  <span class="glyphicon glyphicon-chevron-right"></span>
</a>

或者你可以在全球范围内进行假设你删除了 href="#controlid :

$('body').on('click','.carousel-control',function() 
   $(this).closest('.carousel').carousel( $(this).data('slide') );
);

或者您可以通过在选择器中更具体地单独执行此操作

$('body').on('click','#carouselID .carousel-control',function() 
   $(this).closest('.carousel').carousel( $(this).data('slide') );
);

【参考方案3】：

事实证明，导致此问题的另一个页面的平滑页面跳转脚本。在我从 custom.js 中移出以下内容后，它就可以工作了：

  function filterPath(string) 
    return string
    .replace(/^\//,'')
    .replace(/(index|default).[a-zA-Z]3,4$/,'')
    .replace(/\/$/,'');
  
  var locationPath = filterPath(location.pathname);
  var scrollElem = scrollableElement('html', 'body');

  $('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, 400, function() 
          location.hash = target;
        );
      );
    
  
);

  // use the first element that is "scrollable"
  function scrollableElement(els) 
    for (var i = 0, argLength = arguments.length; i <argLength; i++) 
      var el = arguments[i],
      $scrollElement = $(el);
      if ($scrollElement.scrollTop()> 0) 
        return el;
       else 
        $scrollElement.scrollTop(1);
        var isScrollable = $scrollElement.scrollTop()> 0;
        $scrollElement.scrollTop(0);
        if (isScrollable) 
          return el;
        
      
    
    return [];
          

【参考方案4】：

您应该尝试使用 jquery：

$('.carousel-control').click(function (e) 
  e.preventDefault();
);

【参考方案5】：

这个对我很有效。将 href 替换为“数据目标” <a class="carousel-control right" data-slide="next" data-target="#carousel">

【参考方案6】：

当您链接到 HTML 锚点时，它将相对于 <div id="myCarousel"> 所在的位置，Twitter Bootstrap 默认情况下位于轮播顶部。我看到您使用了data- 标签，因此我认为不需要href 属性。

改变这个：

<!-- Carousel nav --> 
<a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a> 
</div>

到这里：

<!-- Carousel nav --> 
<a class="carousel-control left" data-slide="prev">&lsaquo;</a>
<a class="carousel-control right" data-slide="next">&rsaquo;</a> 
</div>

目前我不在办公室，所以我没有时间在超过 1 个场景中对其进行测试，但是从外观上看，它应该仍然可以工作并给你想要的结果。

【讨论】：

我认为这会起作用，但似乎 href 是滑块导航工作所必需的。我尝试删除它们，但破坏了导航按钮。

@user1810801 它们不应该是必需的，因为data- 标签指定了它们的关系链接。

【参考方案7】：

我试图为此建立一个工作文档。我没有看到跳跃行为。没有做任何不寻常的事情，只是复制了你的标记，添加了示例图像、bootstrap.js、bootstrap-carosel.js 和 bootstrap.css

http://brandonam.com/bootTest/boot.html

fyi：“#myCarousel”的典型浏览器行为是将窗口焦点指向标记为“#myCarousel”的元素......但我认为引导程序默认情况下会阻止这种情况。不应该四处走动。

【讨论】：

是的，我注意到引导示例站点上也没有发生这种行为。我注意到的一件事是，在您的示例中，当您单击前进时，href 值不会出现在 url 中。在我的身上，“/#myCarousel”像普通的 href 链接一样被附加。

【参考方案8】：

将href设置为href="javascript:void(0)"，然后在你的js中添加这个：

$('.carousel-control.right').click(function() $('.carousel').carousel('next'));
$('.carousel-control.left').click(function() $('.carousel').carousel('prev'));

【参考方案9】：

我也遇到了同样的问题

我的 a 标签看起来像：

<a class="carousel-control right" data-mixpanel-tracker="Slider Next" data-slide="next" href="#carousel">

通过删除标签中额外的混合面板属性解决了这个问题：

<a class="carousel-control right" data-slide="next" href="#carousel">

很抱歉，它没有解决您的问题，但它可能会帮助其他有类似问题的人。

【参考方案10】：

我们在这方面花了很多时间，但设置 data-target 属性和其他解决方案对我们不起作用。页面的向上滚动/跳跃是无论如何都发生的。

这似乎发生在每张幻灯片的高度不同的 Bootstrap3 轮播中。 @F*** 上面的评论帮助了我们。对于那些错过它的人，将溢出：隐藏添加到轮播类是解决此问题的好方法：

@media (min-width: 768px)

    #our-carousel
    
      overflow: hidden;    /* workaround to resolve the page jumping/scrolling up on 
                              smaller screens on auto/manual advancing of 
                              carousel */
    

【参考方案11】：

我最终添加了一个溢出：隐藏；到成功的轮播类。

【参考方案12】：

我遇到了同样的问题，发现将指示器按钮锚标签内的HTML属性href=替换为data-target=可以缓解页面跳转问题。

<a class="carousel-control-prev" data-target="#carouselExampleIndicators" role="button" data-slide="prev">
<a class="carousel-control-next" data-target="#carouselExampleIndicators" role="button" data-slide="next">

【参考方案13】：

href="#myCarousel" 正在寻找<a name='myCarousel'></a> 并试图将窗口移动到该位置。

尝试将您的 href 设置为 href="javascript:void(0)"

【讨论】：

是的，我注意到引导示例站点上也没有发生这种行为。我注意到的一件事是，在您的示例中，当您单击前进时，href 值不会出现在 url 中。在我的身上，“/#myCarousel”像普通的 href 链接一样被附加。