Accordion手风琴开闭时触发页面滚动到顶部问题求助

问题根源 #

你使用了href="#"的a标签作为手风琴的触发行元素，这类a标签的默认点击行为就是跳转至页面顶部，这就是每次点击手风琴页面自动回顶的原因。

解决方案 #

这里提供两种可行方案，选择任意一种即可：

方案1：阻止a标签默认行为 #

在现有点击事件的回调函数中新增阻止默认行为的逻辑，修改后的JS代码如下：

let elem = document.getElementsByClassName("panel-heading");
let i;

for (i = 0; i < elem.length; i++) {
  elem[i].addEventListener("click", function(e) {
    // 新增这一行，阻止a标签的默认跳转行为
    e.preventDefault();
    this.classList.toggle("active");
    let panel = this.nextElementSibling;
    if (panel.style.maxHeight) {
      panel.style.maxHeight = null;
    } else {
      let active = document.querySelectorAll(
        ".panel-container .panel-heading.active"
      );
      for (let j = 0; j < active.length; j++) {
        active[j].classList.remove("active");
        active[j].nextElementSibling.style.maxHeight = null;
      }
      this.classList.toggle("active");
      panel.style.maxHeight = panel.scrollHeight + "px";
    }
  });
}

方案2：替换为语义更合理的button标签 #

手风琴触发元素本质是交互按钮而非跳转链接，直接把HTML中所有class="panel-heading"的<a>标签替换为<button>标签即可，无需修改JS逻辑，也不会存在默认跳转的问题。
如果替换后出现轻微样式差异，只需要给.panel-heading新增样式清除button的默认样式即可：

.panel-heading {
  /* 原有样式保持不变，新增下面两行 */
  border: none;
  outline: none;
}

可选优化点 #

你现有JS逻辑中存在重复切换active类的冗余代码：点击事件触发后第一行已经执行了一次classList.toggle("active")，在展开分支（else）中又执行了一次相同的逻辑，可自行删除冗余部分优化代码。

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