CSS
使用Bootstrap手风琴组件可以实现在单击时滚动到活动（打开）手风琴的顶部。手风琴是一种常用的页面折叠效果，可以在有限的空间内展示大量内容。在手风琴中，只有一个项目可以打开，其他项目会自动关闭。通过添加一些自定义代码，我们可以实现点击手风琴项目时，页面会滚动到该项目的顶部位置。下面将会介绍如何实现这一效果，并提供一个案例代码供参考。
实现手风琴滚动到顶部的效果首先，我们需要引入Bootstrap的CSS和JavaScript文件。可以通过CDN引入，也可以下载到本地并引入。html<!DOCTYPE html><html lang="en"><head> <Meta charset="UTF-8"> <Meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Bootstrap 手风琴滚动到顶部</title> <link rel="stylesheet" class="url" target="_blank" rel="nofollow noreferrer" href="/to/?target=https://cdn.JSdelivr.net/npm/bootstrap@5.3.0/dist/CSS/bootstrap.min.CSS"></head><body> <!-- 手风琴 --> <div id="accordion"> <div class="accordion-item"> <h2 class="accordion-header" id="heading1"> <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapse1" aria-expanded="true" aria-controls="collapse1"> 手风琴项目1 </button> </h2> <div id="collapse1" class="accordion-collapse collapse show" aria-labelledby="heading1" data-bs-parent="#accordion"> <div class="accordion-body"> 手风琴项目1的内容 </div> </div> </div> <div class="accordion-item"> <h2 class="accordion-header" id="heading2"> <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse2" aria-expanded="false" aria-controls="collapse2"> 手风琴项目2 </button> </h2> <div id="collapse2" class="accordion-collapse collapse" aria-labelledby="heading2" data-bs-parent="#accordion"> <div class="accordion-body"> 手风琴项目2的内容 </div> </div> </div> </div> <script src="https://cdn.JSdelivr.net/npm/bootstrap@5.3.0/dist/JS/bootstrap.bundle.min.JS"></script></body></html>在上面的代码中，我们创建了一个基本的Bootstrap手风琴，默认情况下，第一个项目是打开的状态，第二个项目是关闭的状态。接下来，我们需要添加一些自定义的JavaScript代码，以实现点击手风琴项目时页面滚动到顶部。可以将以下代码添加到页面的
Copyright © 2025 IZhiDa.com All Rights Reserved.
知答 版权所有 粤ICP备2023042255号