Webflow滚动向下按钮无法跳转至下版块问题求助

排查与修复步骤： #

1. 补全滚动容器的核心样式
   你的滚动吸附代码缺少容器高度和滚动溢出设置，这是触发滚动吸附的基础。修改样式如下：

   <style>
   .scroll-snap-wrapper {
       scroll-snap-type: y mandatory;
       height: 100vh; /* 设为视口高度，确保容器可滚动 */
       overflow-y: scroll; /* 开启垂直滚动 */
       scroll-behavior: smooth; /* 可选：配合按钮实现平滑滚动 */
   }
   .section-1 {
       scroll-snap-align: start;
       height: 100vh; /* 每个版块高度匹配容器，保证吸附定位准确 */
   }
   </style>
   

2. 替换原生锚点跳转为自定义JS逻辑
   Webflow原生锚点跳转和滚动吸附存在冲突，用自定义JS控制按钮跳转：

   • 给滚动按钮添加自定义属性：data-target="#目标版块ID"（比如data-target="#section-2"）
   • 在Webflow页脚自定义代码区添加：

     document.querySelectorAll('[data-target]').forEach(btn => {
         btn.onclick = function(e) {
             e.preventDefault();
             const targetEl = document.querySelector(this.dataset.target);
             targetEl?.scrollIntoView({ block: 'start', behavior: 'smooth' });
         };
     });
     

3. 验证版块ID的准确性

   • 确保目标版块的ID唯一、无空格、大小写与按钮锚点设置完全一致
   • 检查Webflow编辑器中，链接块的「链接设置」是否正确选择了对应版块的ID

4. 关闭Webflow原生平滑滚动（若开启）
   进入项目设置>自定义代码>头部代码，若存在html { scroll-behavior: smooth; }，暂时注释或删除，避免与自定义滚动逻辑冲突。

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