使用手风琴引导滚动到文本

Question

我是 web 开发的新手，并决定在我正在制作的个人网站上使用 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 方式 go（创建一个 function 为您做这两件事）。 (SNIPPET 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>