Elementor中点击按钮显示区块后自动滚动到该区块如何实现

你只需要修改现有JS函数，在区块切换为显示的分支下加1行滚动逻辑即可，代码改动极小，不需要修改其他HTML结构。

修改后的完整脚本代码 #

<script>
function myFunction_sa() {
  var x = document.getElementById("sam-sec");
  if (x.style.display === "block") {
    x.style.display = "none";
  } else {
    x.style.display = "block";
    // 新增滚动逻辑：页面平滑滚动到对应区块位置
    x.scrollIntoView({behavior: "smooth", block: "start"});
  }
}
</script>

代码说明 #

• 新增的scrollIntoView是浏览器原生支持的API，不需要额外引入其他资源
• 配置项behavior: "smooth"会实现平滑滚动效果，如果不需要动画直接跳转，把这个配置删掉写成x.scrollIntoView()即可
• block: "start"表示滚动后区块顶部对齐视口顶部，你也可以改成block: "center"让区块对齐视口中间

操作提示 #

你直接把站点里原来的脚本替换成上面的代码即可，原有按钮的点击切换显示隐藏功能不会受影响，只有在点击按钮让区块从隐藏变成显示的时候才会触发滚动。

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