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

Question

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

<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" width="1170"  alt="wga"></a></div>
                    <div class="item"><a href="work.html"><img src="assets/images/slide_wga.jpg" width="1170"  alt="wga"></a></div>
                    <div class="item"><a href="work.html"><img src="assets/images/slide_ts.jpg" width="1170"  alt="top secret hair"></a></div>
                    <div class="item"><a href="work.html"><img src="assets/images/slide_baja.jpg" width="1170"  alt="baja"></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-->

score 25 · Accepted Answer

25

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

于 2014-08-12T07:45:27.890 回答

score 7 · Accepted Answer

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

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

score 2 · Accepted Answer

事实证明，导致此问题的另一个页面有一个平滑的页面跳转脚本。在我从 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 [];
          }

score 2 · Accepted Answer

你应该尝试使用jquery：

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

score 2 · Accepted Answer

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

score 1 · Accepted Answer

当您链接到 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 个场景中测试它，但是，从外观上看，它应该仍然可以工作并给你想要的结果。

score 0 · Accepted Answer

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

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

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

score 0 · Accepted Answer

我有同样的问题

我的 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">

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

score 0 · Accepted Answer

将 href 设置为href="javascript:void(0)"然后将其添加到您的 js 中的某处：

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

score 0 · Accepted Answer

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

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

@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 */
    }
}

score 0 · Accepted Answer

我遇到了同样的问题，发现将href=指示器按钮锚标记中的 HTML 属性替换为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">

score 0 · Accepted Answer

0

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

于 2020-02-14T16:08:41.023 回答

score -1 · Accepted Answer

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

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

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

13 回答 13

Related

Reference