javascript - 单击使页面向下移动到 Bootstrap Accordion 面板主体的底部

Question

我的网站上有一个引导 Accordion ，我试图通过单击使页面下降到面板主体的底部。目前，如果您单击其中一张图像，您可能不会注意到它会展开为 Accordion ，图片下方有文字。因此，当有人单击图片时，我希望页面单击时转到所选面板主体的底部。

要查看示例，请访问 https://codepen.io/aahmed2/pen/rmEojo?editors=1000

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<div class="row health-main">
    <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
        <div class="panel panel-default col-md-4">
            <div class="panel-heading pet-health" alt="Cat on sidewalk" data-toggle="collapse" data-parent="#accordion,#accordion2" href="#collapseTwo" aria-expanded="false" aria-controls="collapseOne" role="tab" id="headingTwo">
              <h2>Pet Health &amp; Safety</h2>
            </div>
            <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
                <div class="panel-body">
                    <a href="/resources/pet-diseases.asp"><h4>Pet Diseases</h4></a>
                    <!--<a href="/resources/pet-allergies.asp"><h4>Pet Allergies</h4></a>-->
                </div>
            </div>
        </div>
        <div class="panel panel-default col-md-4">
            <div class="panel-heading livestock-health" alt="Young cow near barn" data-toggle="collapse" data-parent="#accordion,#accordion2" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree" role="tab" id="headingThree">
              <h2>Livestock Health &amp; Safety</h2>
            </div>
            <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
                <div class="panel-body">
                    <a href="/resources/livestock-disease.asp"><h4>Livestock Diseases</h4></a>
                    <!--<a href="/resources/livestock-allergies.asp"><h4>Livestock Allergies</h4></a>-->
                </div>
            </div>
        </div>
        <div class="panel panel-default col-md-4">
            <div class="panel-heading wildlife" alt="Raccoon" data-toggle="collapse" data-parent="#accordion,#accordion2" href="#collapseSix" aria-expanded="false" aria-controls="collapseSix" role="tab" id="headingSix">
              <h2>Wildlife Health &amp; Safety</h2>
            </div>
            <div id="collapseSix" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingSix">
                <div class="panel-body">
                    <a href="/resources/wildlife-disease.asp"><h4>Wildlife Diseases</h4></a>
                    <a href="http://wildlife.unl.edu/damage-management"><h4>Wildlife Damage Management</h4></a>
                    <a href="/resources/wildlife-conservation.asp"><h4>Wildlife Conservation</h4></a>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="row health-main">
    <div class="panel-group" id="accordion2" role="tablist" aria-multiselectable="true">
        <div class="panel panel-default col-md-4">
            <div class="panel-heading human-health" alt="Person sitting next to dog in a park" data-toggle="collapse" data-parent="#accordion,#accordion2" href="#collapseFour" aria-expanded="false" aria-controls="collapseFour" role="tab" id="headingFour">
              <h2>Human Health &amp; Safety</h2>
            </div>
            <div id="collapseFour" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingFour">
                <div class="panel-body">
                    <a href="/resources/zoonotic-diseases.asp"><h4>Zoonotic Diseases</h4></a>
                    <a href="/resources/human-allergies.asp"><h4>Allergies</h4></a>
                    <a href="/resources/sanitation.asp"><h4>Sanitation</h4></a>
                </div>
            </div>
        </div>
        <div class="panel panel-default col-md-4">
            <div class="panel-heading insect-tick-mite" alt="Bee on flower" data-toggle="collapse" data-parent="#accordion,#accordion2" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne" role="tab" id="headingOne">           
                <h2>Insects, Ticks, and Mites</h2>            
            </div>
            <div id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">
                <div class="panel-body">
                    <a href="/resources/insect-tick-mite.asp"><h4>Diseases</h4></a></a>
                    <a href="/resources/pests.asp"><h4>Pests</h4></a>
                    <a href="/resources/pollinator-health.asp"><h4>Pollinator Health</h4></a>
                </div>
            </div>
        </div>
        <div class="panel panel-default col-md-4">
            <div class="panel-heading eco-health" alt="Woman holding child's hand walking down a trail" data-toggle="collapse" data-parent="#accordion,#accordion2" href="#collapseFive" aria-expanded="false" aria-controls="collapseFive" role="tab" id="headingFive">           
                <h2>Ecosystem Health</h2>            
            </div>
            <div id="collapseFive" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingFive">
                <div class="panel-body">
                    <a href="/resources/plant-health.asp"><h4>Plant Health</h4></a>
                    <a href="/resources/water-quality.asp"><h4>Water Quality</h4></a>
                    <a href="/resources/air-quality.asp"><h4>Air Quality</h4></a>
                    <a href="/resources/soil-quality.asp"><h4>Soil Quality</h4></a>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

CSS

.health-main #accordion {
    margin-top: 25px;
    cursor: pointer;
}
.health-main #accordion2 {
    margin-top: -19px;
    cursor: pointer;
    margin-bottom: 0px;
}
.health-main .panel-heading:focus {
    border: none;
    outline: 0;
}
.health-main .panel-group {
    clear: both;
}
.health-main .panel-group .panel {
    border-radius: 0%;
    border-width: 0;
    padding: 0 !important;
}
.health-main .panel-group .panel-heading {
    background-color: rgba(0,0,0,1);
    border-radius: 0%;
    color: #fff;
    height: 350px;
    text-align: center;
}
.health-main .panel-group .panel-heading h2 {
    font-size: 1.99em;
    text-transform: none;
    color: #fff;
    margin-top: 140px;
    text-shadow: 2px 2px 3px #333332;
}
.health-main .panel-group .panel-heading a:active, .health-main .panel-group .panel-heading a:visited, .health-main .panel-group .panel-heading a:focus {
    text-decoration: none !important;
}
.health-main .panel-group .insect-tick-mite {
    background: url(http://www.slate.com/content/dam/slate/articles/double_x/the_kids/2015/05/150522_KIDS_Tick.jpg.CROP.promo-mediumlarge.jpg) bottom no-repeat;
    background-size: cover;
}
.health-main .panel-group .pet-health {
    background: url(https://static.pexels.com/photos/126407/pexels-photo-126407.jpeg) center center no-repeat;
    background-size: cover;
}
.health-main .panel-group .livestock-health {
    background: url(https://articles.extension.org//sites/default/files/styles/large/public/CalfEarlyIDFig1.jpg) center center no-repeat;
    background-size: cover;
}
.health-main .panel-group .wildlife {
    background: url(https://abcwildlife.com/wp-content/uploads/2015/05/Raccoon-Control-Identifying-Raccoon-Damage.jpg) center center no-repeat;
    background-size: cover;
}
.health-main .panel-group .human-health {
    background: url(https://www.gatescambridge.org/sites/www.gatescambridge.org/files/styles/flexslider_full_900x500/public/3node072child_and_dog.jpg?itok=Tsuklx_F) center center no-repeat;
    background-size: cover;
}
.health-main .panel-group .eco-health {
    background: url(http://guelph.ca/wp-content/uploads/trees.jpg) bottom no-repeat;
    background-size: cover;
}
.health-main .panel-group .panel-collapse {
    background-color: #c1c0be;
}
.health-main .panel-group .panel-body {
    padding-top: 20px;
    padding-bottom: 30px;
    text-align: center;
}
.health-main .panel-group a {
    color: #000000;
}
.health-main .panel-group a:hover {
    color: #fff;
    text-decoration: none;
}
.health-main .panel-group > .panel {
    margin-top: 5px;
}

Answer 1

您需要做的是 Hook Accordion 的引导显示事件shown.bs.collapse。这样您就可以在 Accordion 完成展开后获取包装元素的高度。然后您就拥有了实现您想要的目标所需的一切。我对代码进行了注释，以帮助您了解我所做的事情。该脚本应放置在 jQuery 和 Bootstrap JS 包含之后。

<script type="text/javascript">
  $(document).ready(function() {
    // do something when accordion has finished expanding the relevent element
    $('.panel-collapse').on('shown.bs.collapse', function() {
      // $(this).parent().offset().top gets the top position of the parent element. 
      // $(window).height() gets the height of the window.
      // $(this).parent().height() gets the height of the parent element.
      // Subtract the top position of the parent element by the height of the window minus the height of the parent elements height.  
      var scroll = $(this).parent().offset().top - ( $(window).height() - $(this).parent().height() );
      // animate the window scroll by the stored scroll variable.
      // The 500 is how long the scroll takes in milliseconds.      
      $('html, body').animate({
        scrollTop: scroll
      }, 500);  
    })
  });
</script>