纯JS+CSS手风琴打开新项页面滚动到底部 如何跳转至激活面板顶部

解决方案 #

你只需要在原有JS代码的激活当前手风琴项逻辑后，添加滚动定位代码即可，修改后的完整JavaScript代码如下：

var acc = document.getElementsByClassName("accordion__wrapper__item");
var i;

for (i = 0; i < acc.length; i++) {
  acc[i].onclick = function() {
    var panel = this.nextElementSibling;
    var coursePanel = document.getElementsByClassName(
      "accordion__wrapper__panel"
    );
    var courseAccordion = document.getElementsByClassName(
      "accordion__wrapper__item"
    );
    var courseAccordionActive = document.getElementsByClassName(
      "accordion__wrapper__item active"
    );

    if (panel.style.maxHeight) {
      panel.style.maxHeight = null;
      this.classList.remove("active");
    } else {
      for (var ii = 0; ii < courseAccordionActive.length; ii++) {
        courseAccordionActive[ii].classList.remove("active");
      }

      for (var iii = 0; iii < coursePanel.length; iii++) {
        coursePanel[iii].style.maxHeight = null;
      }

      panel.style.maxHeight = panel.scrollHeight + "px";
      this.classList.add("active");
      // 新增滚动定位代码
      this.scrollIntoView({
        behavior: 'smooth', // 平滑滚动，不需要可以删除这个参数
        block: 'start' // 元素顶部对齐视口顶部
      });
    }
  };
}

逻辑说明 #

原有页面自动滚动到底部的原因是：打开新的手风琴项前，你先折叠了所有已展开的面板，页面高度瞬间压缩导致视口位置偏移。新增的scrollIntoView方法会主动将当前点击的手风琴标题定位到视口顶部，刚好可以完整展示当前项的标题和展开后的内容，不会出现位置乱跑的问题。
如果不需要平滑滚动效果，直接删除behavior: 'smooth'配置即可，滚动会变成瞬间完成。

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