如何阻止Bootstrap模式按鈕向下滾動頁面？

Question

我在Bootstrap模式中嵌入了一個輪播。 單擊此頁面上的任何徽標都可以看到它。 出於某種原因，當我單擊輪播導航按鈕時，模式后面的頁面會向下滾動，並且這些按鈕將不起作用。 知道是什么原因造成的嗎？

我使用的是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>

Answer 1

這個問題中引用的腳本破壞了我添加到項目中的Bootstrap Carousel 。 我發現可以在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分鍾的Google搜索時間：）