JavaScript Accordion - 自动滚动到打开的手风琴顶部

Posted 2023-05-08

【中文标题】JavaScript Accordion - 自动滚动到打开的手风琴顶部

【英文标题】：JavaScript Accoridon - Auto scroll to top of open accordion

【发布时间】：2016-10-11 08:38:02

【问题描述】：

我正在尝试设置手风琴，以便当用户单击其中一个标题时，页面将自动向下滚动到标题顶部并显示该手风琴项目的打开面板。

但是，我目前遇到的问题是，在我实现的代码中，我的屏幕正在向上滚动，因此手风琴项目的标题正好位于我的屏幕底部，因此面板中的内容是离屏。

这是我的 html 代码：

<div class="accordion" style="margin-bottom:30px"><b>Heading 1</b></div>
<div class="panel">
  <p class="text-light">Text 1</p>
</div>
<div class="accordion" style="margin-bottom:30px"><b>Heading 2</b></div>
<div class="panel">
  <p class="text-light">Text 2</p>
</div>  

这是我的 javascript 代码：

var acc = document.getElementsByClassName("accordion");
var panel = document.getElementsByClassName('panel');

for (var i = 0; i < acc.length; i++) 
 acc[i].onclick = function() 
    var setClasses = !this.classList.contains('active');
    setClass(acc, 'active', 'remove');
    setClass(panel, 'show', 'remove');

    if (setClasses) 
        this.classList.toggle("active");
        this.nextElementSibling.classList.toggle("show");
    

    document.body.scrollTop = this.offsetTop;
 


function setClass(els, className, fnName) 
  for (var i = 0; i < els.length; i++) 
    els[i].classList[fnName](className);
  

【问题讨论】：

我应该使用锚点跳转到正确的位置。成功后，使用 js/jquery 为跳转设置动画。

您应该为此目的使用纯 CSS。看看codepen.io/abergin/pen/ihlDf 和tympanus.net/codrops/2012/02/21/accordion-with-css3

【参考方案1】：

this.offsetTop 显示相对于父元素顶部的位置。您应该获得相对于窗口顶部的位置。这段代码应该适合你：

document.documentElement.scrollTop +=this.getBoundingClientRect().top

【讨论】：

您好，感谢您的评论！该解决方案似乎不起作用，每当我点击手风琴时，屏幕不会移动，它只是停留在以前的位置