如何阻止我的引导模式按钮向下滚动页面？答案

【问题标题】：How can I stop my Bootstrap modal buttons from scrolling down the page?如何阻止我的引导模式按钮向下滚动页面？
【发布时间】：2016-06-06 07:03:50
【问题描述】：

我在 Bootstrap 模式中嵌入了一个轮播。可以通过clicking any of the logos on this page看到。出于某种原因，当我单击轮播导航按钮时，模式后面的页面向下滚动并且按钮不起作用。知道是什么原因造成的吗？

我正在使用 CMS，因此为碎片道歉，但这是我的代码：

模态：

{assign var="uniqueID" value=$gallerydir}
{* gallerydir is a sneaky little bastard that like to change. uniqueID keeps it constant *}

<ul class="nav nav-tabs" id="{$uniqueID}">
  {foreach from=$images item=folderName name=nav}
    {if $smarty.foreach.nav.first}
    <li class="active"><a data-toggle="tab" href="#{$folderName->filename}">{$folderName->title}</a></li>
    {else}
    <li><a data-toggle="tab" href="#{$folderName->filename}">{$folderName->title}</a></li>
    {/if}
  {/foreach}
</ul>
<div class="tab-content">
 {foreach from=$images item=folder name=folderCount}
  {if $smarty.foreach.folderCount.first}
    <div id="{$folder->filename}" class="tab-pane fade in active">
  {else}
    <div id="{$folder->filename}" class="tab-pane fade">
  {/if}
      {Gallery dir="PortfolioGallery/`$uniqueID`/`$folder->filename`" template='CategoryViewer'}
    </div>

 {/foreach}
</div>

<script type="text/javascript">
$(document).ready(function(){
    $("#{$uniqueID} a").click(function(e){
        e.preventDefault();
        $(this).tab('show');
    });
});
</script>

模态框内的轮播：

{assign var="category" value=$gallerydir}
<div id="{$category}-carousel" class="carousel slide" data-ride="carousel">
    <!-- Carousel indicators -->
    <ol class="carousel-indicators">
        <li data-target="#{$category}-carousel" data-slide-to="0" class="active"></li>
        <li data-target="#{$category}-carousel" data-slide-to="1"></li>
        <li data-target="#{$category}-carousel" data-slide-to="2"></li>
    </ol>   
    <!-- Carousel items -->
    <div class="carousel-inner">
     {foreach from=$images item=slide name=slideCount}
      {if $smarty.foreach.slideCount.first}
        <div class="item active">
      {else}
        <div class="item">
      {/if}
            <h2>Slide 2</h2>
            <img src="{$slide->file}" />
            <div class="carousel-caption">
              <h3>Second slide label</h3>
              <p>Aliquam sit amet gravida nibh, facilisis gravida…</p>
            </div>
        </div>
     {/foreach}
    </div>
    <!-- Carousel nav -->
    <a class="carousel-control left" href="#{$category}-carousel" data-slide="prev">
        <i class="fa fa-chevron-left"></i>
    </a>
    <a class="carousel-control right" href="#{$category}-carousel" data-slide="next">
        <i class="fa fa-chevron-right"></i>
    </a>
</div>

编辑：这个脚本在我的页面上......它会导致问题吗？

<!-- Custom JavaScript for the Side Menu and Smooth Scrolling -->
<script>
$(function() {
    $('a[href*=#]:not([href=#])').click(function() {
        if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') || location.hostname == this.hostname) {

            var target = $(this.hash);
            target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
            if (target.length) {
                $('html,body').animate({
                    scrollTop: target.offset().top
                }, 1000);
                return false;
            }
        }
    });
});
</script>

【问题讨论】：

您的 Javascript 必须有冲突，看起来导航按钮与滚动功能相关联，而不是为轮播设置动画。你能分享一下你可能正在使用的 JS 吗？
您的 HTML 标记中有很多错误：validation results。有几个重复的 ID，这可能是问题所在。先解决这个问题。
@APAD1 感谢您花时间回答。我已将 JS 添加到我的主要帖子中。那和第一个框中的脚本确实是唯一的。
@azeós 也谢谢你。我现在正在修复重复的 ID
注释掉您添加到问题中的脚本，然后查看问题是否仍然存在。我猜脚本是导致问题的原因，因此您必须使该脚本中的选择器更加具体，以免影响您的模态轮播。

标签： javascript jquery html css twitter-bootstrap

【解决方案1】：

这个问题中引用的脚本破坏了我添加到项目中的Bootstrap Carousel。我发现你可以add multiple selectors on not，如下：

$(function() {
    $('a[href*="#"]:not([href="#"],[href="#my-bootstrap-carousel"])').click(function() {
        if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
        var target = $(this.hash);
        target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
        if (target.length) {
        $('html, body').animate({
        scrollTop: target.offset().top
        }, 500);
        return false;
        }
        }
    });
});

希望这可以节省 20 分钟的谷歌搜索时间：)

【讨论】：