折叠后自动滚动

基础概念

折叠后自动滚动是指在网页或应用中，当某个部分（如菜单、列表或面板）被折叠或隐藏时，页面会自动滚动到另一个特定部分或保持在当前视图中的某个位置。这种功能通常用于提升用户体验，确保用户在操作后能够快速定位到感兴趣的内容。

类型

折叠后滚动到特定部分：当某个部分被折叠时，页面自动滚动到另一个特定的部分。
折叠后保持在当前视图：当某个部分被折叠时，页面保持在当前视图中的某个位置，不进行滚动。
折叠后平滑滚动：当某个部分被折叠时，页面平滑地滚动到目标位置，而不是瞬间跳转。

应用场景

导航菜单：在复杂的网页或应用中，当用户折叠导航菜单时，页面自动滚动到主要内容区域。
长页面布局：在包含大量内容的页面中，当用户折叠某个部分时，页面自动滚动到下一个重要部分。
动态内容展示：在展示动态内容的页面中，当用户折叠某个部分时，页面自动滚动到新的内容区域。

实现方法

以下是一个使用JavaScript实现折叠后自动滚动的示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>折叠后自动滚动示例</title>
    <style>
        .section {
            height: 500px;
            border: 1px solid #ccc;
            margin-bottom: 20px;
        }
        .button {
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <div class="section" id="section1">Section 1</div>
    <button class="button" onclick="scrollToSection('section2')">折叠后滚动到 Section 2</button>
    <div class="section" id="section2">Section 2</div>

    <script>
        function scrollToSection(sectionId) {
            const targetSection = document.getElementById(sectionId);
            targetSection.scrollIntoView({ behavior: 'smooth' });
        }
    </script>
</body>
</html>