使用手风琴滚动到文本 bootstrap

Question

我是网络开发的新手，决定在我制作的个人网站上使用 Bootstrap。我希望卡片在单击按钮时展开以包含更多详细信息，但是当手风琴文件夹关闭时，内容位于页面底部。这意味着当手风琴展开时，用户可能需要滚动以查看显示的内容，否则他们可能会错过它。我知道使用按钮通常可以使用它的 id 滚动到一个元素，但是因为当我尝试做 href="#aboutCollapse" 时它是一个手风琴元素，网页实际上不会滚动到任何东西而且我不确定为什么会这样。

这是 html 部分的代码：

<div class="accordion" id="infoGroup">
        <div class="card-container">
            <div class="card info-card">
                <div class="card-header">
                    <h5>About Me</h5>
                </div>
                <div class="card-body info-text" id="card1">
                    <p class="card-text" style="height: 70%">I am a junior year computer science major who loves to create.</p>
                    <button class="btn btn-primary collapsed" href="#aboutCollapse" type="button" data-toggle="collapse" data-target="#aboutCollapse" aria-expanded="false" aria-controls="aboutCollapse">More</button>
                </div>
            </div>
            <div class="card info-card" id="card2">
                <div class="card-header">
                    <h5>Projects</h5>
                </div>
                <div class="card-body info-text">
                    <p class="card-text" style="height: 70%;">I work on a lot of projects. All my projects end up on Github.</p>
                    <button class="btn btn-primary collapsed" type="button" data-toggle="collapse" data-target="#projectsCollapse" aria-expanded="false" aria-controls="projectsCollapse">More</button>
                    <a class="btn btn-primary" href="#">Open</a>
                </div>
            </div>
            <div class="card info-card" id="card3">
                <div class="card-header">
                    <h5>Resume</h5>
                </div>
                <div class="card-body info-text">
                    <p>My resume is where to get the most professional, up to date information about my career and personal achievements.</p>
                    <button class="btn btn-primary collapsed" type="button" data-toggle="collapse" data-target="#resumeCollapse" aria-expanded="false" aria-controls="resumeCollapse">More</button>
                    <a class="btn btn-primary" href="documents/Jeffrey Carr Resume.pdf" target="_blank">Open</a>
                </div>
            </div>
        </div>

        <!-- More info from cards -->
        <div class="accordian-group">
            <div class="collapse collapse-card" id="aboutCollapse" data-parent="#infoGroup" aria-labelledby="card1">
                    <h5 class="border-bottom border-dark collapse-card-title">About Me</h5>
                    <p class="collapse-card-text" >I don't really know how to talk about myself. Hopefully I'll be able to come up with enough to fill this space.</p>
            </div>
            <div class="collapse collapse-card" id="projectsCollapse" data-parent="#infoGroup" aria-labelledby="card2">
                <h5 class="border-bottom border-dark collapse-card-title">Projects</h5>
                <p class="collapse-card-text" >This section will show my most recent project. There will be a link to a separate projects page.</p>
            </div>
            <div class="collapse collapse-card" id="resumeCollapse" data-parent="#infoGroup" aria-labelledby="card3">
                <h5 class="border-bottom border-dark collapse-card-title">Resume</h5>
                <p class="collapse-card-text">This section will show the highlights of my resume</p>
            </div>
        </div>
    </div>

是否有任何简单的解决方案可以使网页滚动显示内容的开头？在我学习的过程中，也欢迎对我的 html 提出任何其他批评。

Answer 1

我不知道你的设计思路有多严格，但我会把手风琴放在我的卡片中以显示更多信息。（片段 1）

如果您真的想同时做两件事（打开手风琴并滚动到某个位置），您可能需要采用 JS 方式（创建一个为您做这两件事的函数）。（片段 2）为此，您必须离开项目的 data-* 类型控件，并创建 JavaScript (jQuery) 函数。

片段 1

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>


<div class="container">
  <div class="row">
    <div class="col">
      <div class="accordion" id="infoGroup">
        <div class="card-container">
          <div class="card info-card">
            <div class="card-header">
              <h5>About Me</h5>
            </div>
            <div class="card-body info-text" id="card1">
              <p class="card-text" style="height: 70%">I am a junior year computer science major who loves to create.</p>
              <button class="btn btn-primary collapsed" href="#aboutCollapse" type="button" data-toggle="collapse" data-target="#aboutCollapse" aria-expanded="false" aria-controls="aboutCollapse">More</button>
              <div class="collapse collapse-card" id="aboutCollapse" data-parent="#infoGroup" aria-labelledby="card1">
                <h5 class="border-bottom border-dark collapse-card-title">About Me</h5>
                <p class="collapse-card-text">I don't really know how to talk about myself. Hopefully I'll be able to come up with enough to fill this space.</p>
              </div>
            </div>
          </div>
          <div class="card info-card" id="card2">
            <div class="card-header">
              <h5>Projects</h5>
            </div>
            <div class="card-body info-text">
              <p class="card-text" style="height: 70%;">I work on a lot of projects. All my projects end up on Github.</p>
              <button class="btn btn-primary collapsed" type="button" data-toggle="collapse" data-target="#projectsCollapse" aria-expanded="false" aria-controls="projectsCollapse">More</button>
              <a class="btn btn-primary" href="#">Open</a>
            </div>
          </div>
          <div class="card info-card" id="card3">
            <div class="card-header">
              <h5>Resume</h5>
            </div>
            <div class="card-body info-text">
              <p>My resume is where to get the most professional, up to date information about my career and personal achievements.</p>
              <button class="btn btn-primary collapsed" type="button" data-toggle="collapse" data-target="#resumeCollapse" aria-expanded="false" aria-controls="resumeCollapse">More</button>
              <a class="btn btn-primary" href="documents/Jeffrey Carr Resume.pdf" target="_blank">Open</a>
            </div>
          </div>
        </div>

        <!-- More info from cards -->
        <div class="accordian-group">
          <div class="collapse collapse-card" id="projectsCollapse" data-parent="#infoGroup" aria-labelledby="card2">
            <h5 class="border-bottom border-dark collapse-card-title">Projects</h5>
            <p class="collapse-card-text">This section will show my most recent project. There will be a link to a separate projects page.</p>
          </div>
          <div class="collapse collapse-card" id="resumeCollapse" data-parent="#infoGroup" aria-labelledby="card3">
            <h5 class="border-bottom border-dark collapse-card-title">Resume</h5>
            <p class="collapse-card-text">This section will show the highlights of my resume</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

片段 2

jQuery(document).ready(function($) {

  $('#toggleAboutCollapse').on('click', function(e) {
    // this prevents the webpage to jump to the anchor when you
    // clock on the link with the ID in the selector
    e.preventDefault()

    // this toggles the state of the accordion item
    $('#aboutCollapse').collapse('toggle')

    // this creates a smooth scroll effect on your page
    // 2000 ms (that's two seconds) may be a bit slow :)
    $('html, body').animate({
      scrollTop: $("#aboutCollapse").offset().top
    }, 2000);
  })

})

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>


<div class="container">
  <div class="row">
    <div class="col">
      <div class="accordion" id="infoGroup">
        <div class="card-container">
          <div class="card info-card">
            <div class="card-header">
              <h5>About Me</h5>
            </div>
            <div class="card-body info-text" id="card1">
              <p class="card-text" style="height: 70%">I am a junior year computer science major who loves to create.</p>
              <button id="toggleAboutCollapse" class="btn btn-primary collapsed" href="#aboutCollapse" type="button" data-toggle="collapse" data-target="#aboutCollapse" aria-expanded="false" aria-controls="aboutCollapse">More</button>

            </div>
          </div>
          <div class="card info-card" id="card2">
            <div class="card-header">
              <h5>Projects</h5>
            </div>
            <div class="card-body info-text">
              <p class="card-text" style="height: 70%;">I work on a lot of projects. All my projects end up on Github.</p>
              <button class="btn btn-primary collapsed" type="button" data-toggle="collapse" data-target="#projectsCollapse" aria-expanded="false" aria-controls="projectsCollapse">More</button>
              <a class="btn btn-primary" href="#">Open</a>
            </div>
          </div>
          <div class="card info-card" id="card3">
            <div class="card-header">
              <h5>Resume</h5>
            </div>
            <div class="card-body info-text">
              <p>My resume is where to get the most professional, up to date information about my career and personal achievements.</p>
              <button class="btn btn-primary collapsed" type="button" data-toggle="collapse" data-target="#resumeCollapse" aria-expanded="false" aria-controls="resumeCollapse">More</button>
              <a class="btn btn-primary" href="documents/Jeffrey Carr Resume.pdf" target="_blank">Open</a>
            </div>
          </div>
        </div>

        <!-- More info from cards -->
        <div class="accordian-group">
          <div class="collapse collapse-card" id="aboutCollapse" data-parent="#infoGroup" aria-labelledby="card1">
            <h5 class="border-bottom border-dark collapse-card-title">About Me</h5>
            <p class="collapse-card-text">I don't really know how to talk about myself. Hopefully I'll be able to come up with enough to fill this space.</p>
          </div>
          <div class="collapse collapse-card" id="projectsCollapse" data-parent="#infoGroup" aria-labelledby="card2">
            <h5 class="border-bottom border-dark collapse-card-title">Projects</h5>
            <p class="collapse-card-text">This section will show my most recent project. There will be a link to a separate projects page.</p>
          </div>
          <div class="collapse collapse-card" id="resumeCollapse" data-parent="#infoGroup" aria-labelledby="card3">
            <h5 class="border-bottom border-dark collapse-card-title">Resume</h5>
            <p class="collapse-card-text">This section will show the highlights of my resume</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

使用手风琴滚动到文本 bootstrap

Scrolling to text with accordion bootstrap

html

javascript

accordion

bootstrap-4

片段 1

片段 2