如何实现点击页面平滑滚动至下一个100vh高度的div？

要实现点击页面左侧全屏区块时自动平滑滚动到下一个区块，同时排除右侧固定侧边栏的点击干扰，可以按以下方式修改代码：

核心思路 #

1. 给所有全屏区块添加统一类名，方便批量绑定事件
2. 点击区块时，获取当前区块的下一个兄弟区块，触发平滑滚动
3. 阻止右侧侧边栏的点击事件冒泡，避免误触发滚动

修改后的完整代码 #

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- 给所有区块添加统一的page-section类 -->
<div class="page-section p1"></div>
<div class="page-section p2"></div>
<div class="page-section p3"></div>
<div class="admin"></div>

CSS

body {
  margin: 0;
  height: 100%;
}

/* 提取区块公共样式，减少重复代码 */
.page-section {
  height: 100vh;
  width: 70%;
}

.p1 {
  background-color: #2196F3;
}

.p2 {
  background-color: #E91E63;
}

.p3 {
  background-color: #01579B;
}

.admin {
  background-color: #B71C1C;
  height: 100vh;
  position: fixed;
  right: 0;
  top: 0;
  width: 30%;
}

JavaScript

// 给所有页面区块绑定点击事件
$(".page-section").click(function() {
  // 获取当前区块的下一个同类型区块
  const nextSection = $(this).next(".page-section");
  
  // 存在下一个区块时执行平滑滚动
  if (nextSection.length) {
    $("html, body").animate({
      scrollTop: nextSection.offset().top
    }, "slow");
  }
});

// 阻止侧边栏点击事件冒泡，避免触发滚动逻辑
$(".admin").click(function(e) {
  e.stopPropagation();
});

功能说明 #

• 点击左侧任意page-section区块，会自动平滑滚动到下一个区块；如果当前是最后一个区块，点击无动作
• 右侧admin侧边栏的点击不会触发滚动，因为通过stopPropagation()阻止了事件冒泡
• 保留原有页面布局结构，仅优化了类名复用和事件触发逻辑

内容的提问来源于stack exchange，提问作者arian zagros