Question

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

然而，我目前的问题是，通过我实现的代码，我的屏幕向上滚动，以便手风琴项目的标题位于我的屏幕底部，因此面板中的内容是屏幕外。

这是我的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);
  }
}

Answer 1

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

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

JavaScript Accoridon - 自动滚动到开放式手风琴的顶部

1 个答案: