当我打开一个新的手风琴选项卡(纯javascript和css)时，窗口向下滚动

Question

我有一个纯javascript和css手风琴，里面有大量的文本。当我打开一个新的选项卡时，我会被留在页面的底部，我必须向上滚动到手风琴项目的开头才能阅读内容。

我想滚动到打开的特定活动面板的顶部。

提前感谢！

Html代码：

CSS:

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++) {
this.classList.remove("active");
coursePanel[iii].style.maxHeight = null;
}
panel.style.maxHeight = panel.scrollHeight + "px";
this.classList.add("active");
}
};
}

.accordion__wrapper {
max-width: 80%;
margin-top: 3rem;
&__intro {
font-size: 1.2rem;
font-weight: 600;
margin-bottom: 4rem;
color: black;
}
}
button.accordion__wrapper__item {
display: flex;
background-color: transparent;
color: blue;
cursor: pointer;
padding: 18px;
padding-left: 0;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 1.2rem;
font-weight: 200;
transition: 0.4s;
line-height: 1.5em;
text-transform: none;
letter-spacing: 0px;
font-weight: 600;
}
button.accordion__wrapper__item:before {
content: '02B';
color: white;
background-color: black;
padding-left: 10px;
padding-right: 10px;
margin-right: 15px;
font-weight: bold;
float: left;
margin-left: 0;
}
button.accordion__wrapper__item.active:before {
content: "2212";
}
div.accordion__wrapper__panel {
padding: 0 18px;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
width: 100%;
font-family: "roboto";
font-size: 15px;
line-height: 1.6em;
letter-spacing: .4px;
font-weight: 400;
font-style: normal;
color: black;
margin-bottom: 5px;
p {
color: black;
font-weight: 200;
max-width: 50%;
margin-top: 1rem;
margin-left: 2rem;
a {
color: blue;
}
}
}
.accordion-line {
width: 100%;
height: 1px;
background-color: rgb(198, 198, 198);
visibility: visible;
margin-top: 32px;
margin-bottom: 32px;
}
.accordion-line:last-child {
visibility: hidden;
}
.accordion__link {
display: flex;
margin-left: 32pxff;
cursor: pointer;
text-decoration: none;
&--top {
margin-left: 0;
margin-top: 8px;
}
&__img {
margin-right: -16px;
&--top {
margin-right: 16px;
}
}
&__text {
color: blue;
font-weight: 600 !important;
margin-left: 0;
}
}
.accordion__dot {
display: grid;
grid-template-columns: auto 1fr;
justify-content: start;
align-items: start;
&__span {
display: block;
height: 8px;
width: 8px;
background-color: black;
margin-top: 8px;
margin-right: 16px;
margin-left: 32pxg;
}
&__p {
margin-top: 0 !important;
font-weight: 200;
max-width: 50%;
margin-left: 0 !important;
}
}
.accordion__wrapper__panel {
ul {
list-style-type: square;
margin-left: 10px;
max-width: 50%;
li {
font-weight: 200;
}
}
}
@media (max-width: 768px) {
.accordion__wrapper__panel {
p {
max-width: 70% !important;
}
ul {
max-width: 70% !important;
}
}
}
@media (max-width: 414px) {
.panel {
padding: 0;
margin: 0;
}
.accordion-p {
max-width: 100%;
margin-left: 0;
}
.accordion__wrapper__panel {
ul {
max-width: 100% !important;
}
}
}
@media (max-width: 414px) {
.accordion__wrapper {
margin-top: 48px;
max-width: 100%;
margin-left: 16px;
margin-right: 16px;
&__intro {
margin-bottom: 48px;
}
&__panel {
p {
max-width: 100% !important;
}
}
}
}
@media (max-width: 320px) {
.accordion__wrapper {
margin-top: 3rem;
margin-bottom: 32px;
}
.accordion {
padding: 0;
&:before {
margin-right: 24px;
}
}
.accordion-p {
max-width: 100%;
margin-left: 0;
}
.accordion__dot__span {
margin-left: 0;
}
.accordion__dot__p {
max-width: 100%;
margin-left: 0;
}
}

<section class="accordion__wrapper">
<p class="accordion__wrapper__intro">Im einzelnen geht es beim Immobilienkauf um Folgendes:</p>
<button class="accordion__wrapper__item">1. Kaufgegenstand</button>
<div class="accordion__wrapper__panel">
<p>
Zur <a href="">Vorbereitung</a> des Kaufvertrages und der Einsichtnahme in das Grundbuch benötigen wir von Ihnen Angaben zum Grundstück oder der Wohnung, insbesondere zum Grundbuchblatt, auf welchem das Grundstück verzeichnet ist, oder wo es belegen
ist. Auch sollten Sie uns von sich aus rechtzeitig Besonderheiten des Kaufobjekts mitteilen, damit wir diese individuell im Vertragstext berücksichtigen können. Hierzu zählen natürlich auch etwaige Ihnen bekannte Mängel oder von einer Partei versprochene
Zusatzleistungen.
</p>
</div>
<div class="accordion-line"></div>
<button class="accordion__wrapper__item">2. Belastungen des Grundstücks</button>
<div class="accordion__wrapper__panel">
<p>
Häufig sind Grundstücke mit den unterschiedlichsten Rechten belastet, wie z. B. Grundschulden oder Hypotheken, Dienstbarkeiten oder Reallasten, aber auch Wohnrechten, Nacherbenvermerken oder Zwangsvollstreckungsvermerken. Die meisten Belastungen sind
aus dem Grundbuch erkennbar. In der Regel verpflichtet sich der Verkäufer, die auf dem Grundstück ruhenden Hypotheken und Grundschulden zu löschen, sei es durch Rückzahlung des gesicherten Kredits oder durch Verpfändung eines anderen Grundstücks.
<br>
<br> Sofern Sie den Kaufpreis durch Kreditaufnahme finanzieren, muss zugunsten Ihrer Bank eine Grundschuld (siehe auch Grundpfandrechte) bestellt werden.
</p>
</div>
<div class="accordion-line"></div>
<button class="accordion__wrapper__item">3. Fälligkeit des Kaufpreises</button>
<div class="accordion__wrapper__panel">
<p>Beim Immobilienkaufvertrag ist die Sicherung des Leistungsaustausches von besonderer Bedeutung. Der Verkäufer soll das Eigentum nur übertragen, wenn die Kaufpreiszahlung gesichert ist; der Käufer will den Kaufpreis erst zahlen, wenn der Eigentumswechsel
gesichert ist. Deshalb sieht der Kaufvertrag regelmäßig vor, dass der Kaufpreis erst nach Vorliegen bestimmter Voraussetzungen an den Verkäufer gezahlt werden soll. Hierzu zählen in der Regel:</p>
<ul>
<li>das Vorliegen aller erforderlichen Genehmigungen oder Zustimmungserklärungen, das Vorliegen aller erforderlichen Genehmigungen oder Zustimmungserklärungen,</li>
<li>das Vorliegen aller erforderlichen Genehmigungen oder Zustimmungserklärungen,</li>
</ul>
<p>Ein geeignetes Mittel zur Gewährleistung einer Zug-um-Zug-Abwicklung ist die Kaufpreiszahlung über ein Notaranderkonto.</p>
</div>
<div class="accordion-line"></div>
<button class="accordion__wrapper__item">4. Fälligkeit des Kaufpreises</button>
<div class="accordion__wrapper__panel">
<p>
Im Kaufvertrag ist der Stichtag für den wirtschaftlichen Übergang des Grundstücks auf den Käufer festzulegen. Von diesem Zeitpunkt an kann der Käufer das Grundstück in Besitz nehmen. Mieterträge stehen von nun an dem Käufer zu, der ab dem Stichtag allerdings
auch die Kosten und Lasten des Grundstücks (Müll- und Abwassergebühren, Grundsteuer etc.) zu tragen hat. Der wirtschaftliche Übergang erfolgt in der Regel mit der vollständigen Kaufpreiszahlung.
<br>
<br> Ist die Übergabe des Kaufgegenstandes Voraussetzung für die Auszahlung des Kaufpreises vom Notaranderkonto, so ist dem Notar die erfolgte Übergabe unverzüglich nachzuweisen. In der Regel geschieht dies durch Übersendung eines bei Übergabe von
beiden Vertragsparteien unterzeichneten Übergabeprotokolls.
</p>
<div class="accordion__link">
<img class="accordion__link__img" src="assets/pdf-blue.svg" alt="pdf" />
<p class="accordion__link__text">Download Muster Übergabeprotokoll (PDF)</p>
</div>
</div>
<div class="accordion-line"></div>
<button class="accordion__wrapper__item">5. Fälligkeit des Kaufpreises</button>
<div class="accordion__wrapper__panel">
<p>
Liegen dem Notar sämtliche für die Eigentumsumschreibung erforderlichen Unterlagen vor und sind die ihm von Gläubigern aufgegebenen Treuhandauflagen erfüllbar, wird er beim Grundbuchamt die Eigentumsumschreibung beantragen, vorausgesetzt natürlich, dass
der Kaufpreis bezahlt ist. Auf diese Weise hat der Verkäufer die Sicherheit, das Eigentum am Kaufgegenstand erst nach Erhalt des vertraglich vereinbarten Kaufpreises zu verlieren.
</p>
</div>
<div class="accordion-line"></div>
<button class="accordion__wrapper__item">6. Fälligkeit des Kaufpreises</button>
<div class="accordion__wrapper__panel">
<p>
Um einen ersten Vertragsentwurf zu fertigen, benötigen wir von Ihnen eine Angabe zu den Parteien und dem Objekt! Füllen Sie den Vorbereitungsbogen aus und schicken Sie ihn an uns zurück. Wir werden uns sodann bei Ihnen melden.
</p>
<div class="accordion__link">
<img class="accordion__link__img" src="assets/pdf-blue.svg" alt="pdf" />
<p class="accordion__link__text">Download Vorbereitungsbogen (PDF)</p>
</div>
</div>
<div class="accordion-line"></div>
<button class="accordion__wrapper__item">7. Fälligkeit des Kaufpreises</button>
<div class="accordion__wrapper__panel">
<div class="accordion__link">
<img class="accordion__link__img" src="assets/pdf-blue.svg" alt="pdf" />
<p class="accordion__link__text">Glossar zu Grundstücks- und Hauskaufverträgen (PDF)</p>
</div>
<div class="accordion__link">
<img class="accordion__link__img" src="assets/pdf-blue.svg" alt="pdf" />
<p class="accordion__link__text">Merkblatt zum Kauf eines gebrauchten Hauses (PDF)</p>
</div>
</div>
<div class="accordion-line"></div>
</section>

Answer 1

您可以使用item.scrollIntoView()并向onclick函数添加事件参数

onclick = function(e)

其中e代表event则添加e.target.scrollIntoView()将在onclick函数((中的任何位置工作

var acc = document.getElementsByClassName("accordion__wrapper__item");
var i;
for (i = 0; i < acc.length; i++) {
// change to function(e)
acc[i].onclick = function(e) {
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++) {
this.classList.remove("active");
coursePanel[iii].style.maxHeight = null;
}
panel.style.maxHeight = panel.scrollHeight + "px";
this.classList.add("active");
// added scrollIntoView()
e.target.scrollIntoView()


}
};
}

.accordion__wrapper {
max-width: 80%;
margin-top: 3rem;
&__intro {
font-size: 1.2rem;
font-weight: 600;
margin-bottom: 4rem;
color: black;
}
}
button.accordion__wrapper__item {
display: flex;
background-color: transparent;
color: blue;
cursor: pointer;
padding: 18px;
padding-left: 0;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 1.2rem;
font-weight: 200;
transition: 0.4s;
line-height: 1.5em;
text-transform: none;
letter-spacing: 0px;
font-weight: 600;
}
button.accordion__wrapper__item:before {
content: '02B';
color: white;
background-color: black;
padding-left: 10px;
padding-right: 10px;
margin-right: 15px;
font-weight: bold;
float: left;
margin-left: 0;
}
button.accordion__wrapper__item.active:before {
content: "2212";
}
div.accordion__wrapper__panel {
padding: 0 18px;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
width: 100%;
font-family: "roboto";
font-size: 15px;
line-height: 1.6em;
letter-spacing: .4px;
font-weight: 400;
font-style: normal;
color: black;
margin-bottom: 5px;
p {
color: black;
font-weight: 200;
max-width: 50%;
margin-top: 1rem;
margin-left: 2rem;
a {
color: blue;
}
}
}
.accordion-line {
width: 100%;
height: 1px;
background-color: rgb(198, 198, 198);
visibility: visible;
margin-top: 32px;
margin-bottom: 32px;
}
.accordion-line:last-child {
visibility: hidden;
}
.accordion__link {
display: flex;
margin-left: 32pxff;
cursor: pointer;
text-decoration: none;
&--top {
margin-left: 0;
margin-top: 8px;
}
&__img {
margin-right: -16px;
&--top {
margin-right: 16px;
}
}
&__text {
color: blue;
font-weight: 600 !important;
margin-left: 0;
}
}
.accordion__dot {
display: grid;
grid-template-columns: auto 1fr;
justify-content: start;
align-items: start;
&__span {
display: block;
height: 8px;
width: 8px;
background-color: black;
margin-top: 8px;
margin-right: 16px;
margin-left: 32pxg;
}
&__p {
margin-top: 0 !important;
font-weight: 200;
max-width: 50%;
margin-left: 0 !important;
}
}
.accordion__wrapper__panel {
ul {
list-style-type: square;
margin-left: 10px;
max-width: 50%;
li {
font-weight: 200;
}
}
}
@media (max-width: 768px) {
.accordion__wrapper__panel {
p {
max-width: 70% !important;
}
ul {
max-width: 70% !important;
}
}
}
@media (max-width: 414px) {
.panel {
padding: 0;
margin: 0;
}
.accordion-p {
max-width: 100%;
margin-left: 0;
}
.accordion__wrapper__panel {
ul {
max-width: 100% !important;
}
}
}
@media (max-width: 414px) {
.accordion__wrapper {
margin-top: 48px;
max-width: 100%;
margin-left: 16px;
margin-right: 16px;
&__intro {
margin-bottom: 48px;
}
&__panel {
p {
max-width: 100% !important;
}
}
}
}
@media (max-width: 320px) {
.accordion__wrapper {
margin-top: 3rem;
margin-bottom: 32px;
}
.accordion {
padding: 0;
&:before {
margin-right: 24px;
}
}
.accordion-p {
max-width: 100%;
margin-left: 0;
}
.accordion__dot__span {
margin-left: 0;
}
.accordion__dot__p {
max-width: 100%;
margin-left: 0;
}
}

<section class="accordion__wrapper">
<p class="accordion__wrapper__intro">Im einzelnen geht es beim Immobilienkauf um Folgendes:</p>
<button class="accordion__wrapper__item">1. Kaufgegenstand</button>
<div class="accordion__wrapper__panel">
<p>
Zur <a href="">Vorbereitung</a> des Kaufvertrages und der Einsichtnahme in das Grundbuch benötigen wir von Ihnen Angaben zum Grundstück oder der Wohnung, insbesondere zum Grundbuchblatt, auf welchem das Grundstück verzeichnet ist, oder wo es belegen
ist. Auch sollten Sie uns von sich aus rechtzeitig Besonderheiten des Kaufobjekts mitteilen, damit wir diese individuell im Vertragstext berücksichtigen können. Hierzu zählen natürlich auch etwaige Ihnen bekannte Mängel oder von einer Partei versprochene
Zusatzleistungen.
</p>
</div>
<div class="accordion-line"></div>
<button class="accordion__wrapper__item">2. Belastungen des Grundstücks</button>
<div class="accordion__wrapper__panel">
<p>
Häufig sind Grundstücke mit den unterschiedlichsten Rechten belastet, wie z. B. Grundschulden oder Hypotheken, Dienstbarkeiten oder Reallasten, aber auch Wohnrechten, Nacherbenvermerken oder Zwangsvollstreckungsvermerken. Die meisten Belastungen sind
aus dem Grundbuch erkennbar. In der Regel verpflichtet sich der Verkäufer, die auf dem Grundstück ruhenden Hypotheken und Grundschulden zu löschen, sei es durch Rückzahlung des gesicherten Kredits oder durch Verpfändung eines anderen Grundstücks.
<br>
<br> Sofern Sie den Kaufpreis durch Kreditaufnahme finanzieren, muss zugunsten Ihrer Bank eine Grundschuld (siehe auch Grundpfandrechte) bestellt werden.
</p>
</div>
<div class="accordion-line"></div>
<button class="accordion__wrapper__item">3. Fälligkeit des Kaufpreises</button>
<div class="accordion__wrapper__panel">
<p>Beim Immobilienkaufvertrag ist die Sicherung des Leistungsaustausches von besonderer Bedeutung. Der Verkäufer soll das Eigentum nur übertragen, wenn die Kaufpreiszahlung gesichert ist; der Käufer will den Kaufpreis erst zahlen, wenn der Eigentumswechsel
gesichert ist. Deshalb sieht der Kaufvertrag regelmäßig vor, dass der Kaufpreis erst nach Vorliegen bestimmter Voraussetzungen an den Verkäufer gezahlt werden soll. Hierzu zählen in der Regel:</p>
<ul>
<li>das Vorliegen aller erforderlichen Genehmigungen oder Zustimmungserklärungen, das Vorliegen aller erforderlichen Genehmigungen oder Zustimmungserklärungen,</li>
<li>das Vorliegen aller erforderlichen Genehmigungen oder Zustimmungserklärungen,</li>
</ul>
<p>Ein geeignetes Mittel zur Gewährleistung einer Zug-um-Zug-Abwicklung ist die Kaufpreiszahlung über ein Notaranderkonto.</p>
</div>
<div class="accordion-line"></div>
<button class="accordion__wrapper__item">4. Fälligkeit des Kaufpreises</button>
<div class="accordion__wrapper__panel">
<p>
Im Kaufvertrag ist der Stichtag für den wirtschaftlichen Übergang des Grundstücks auf den Käufer festzulegen. Von diesem Zeitpunkt an kann der Käufer das Grundstück in Besitz nehmen. Mieterträge stehen von nun an dem Käufer zu, der ab dem Stichtag allerdings
auch die Kosten und Lasten des Grundstücks (Müll- und Abwassergebühren, Grundsteuer etc.) zu tragen hat. Der wirtschaftliche Übergang erfolgt in der Regel mit der vollständigen Kaufpreiszahlung.
<br>
<br> Ist die Übergabe des Kaufgegenstandes Voraussetzung für die Auszahlung des Kaufpreises vom Notaranderkonto, so ist dem Notar die erfolgte Übergabe unverzüglich nachzuweisen. In der Regel geschieht dies durch Übersendung eines bei Übergabe von
beiden Vertragsparteien unterzeichneten Übergabeprotokolls.
</p>
<div class="accordion__link">
<img class="accordion__link__img" src="assets/pdf-blue.svg" alt="pdf" />
<p class="accordion__link__text">Download Muster Übergabeprotokoll (PDF)</p>
</div>
</div>
<div class="accordion-line"></div>
<button class="accordion__wrapper__item">5. Fälligkeit des Kaufpreises</button>
<div class="accordion__wrapper__panel">
<p>
Liegen dem Notar sämtliche für die Eigentumsumschreibung erforderlichen Unterlagen vor und sind die ihm von Gläubigern aufgegebenen Treuhandauflagen erfüllbar, wird er beim Grundbuchamt die Eigentumsumschreibung beantragen, vorausgesetzt natürlich, dass
der Kaufpreis bezahlt ist. Auf diese Weise hat der Verkäufer die Sicherheit, das Eigentum am Kaufgegenstand erst nach Erhalt des vertraglich vereinbarten Kaufpreises zu verlieren.
</p>
</div>
<div class="accordion-line"></div>
<button class="accordion__wrapper__item">6. Fälligkeit des Kaufpreises</button>
<div class="accordion__wrapper__panel">
<p>
Um einen ersten Vertragsentwurf zu fertigen, benötigen wir von Ihnen eine Angabe zu den Parteien und dem Objekt! Füllen Sie den Vorbereitungsbogen aus und schicken Sie ihn an uns zurück. Wir werden uns sodann bei Ihnen melden.
</p>
<div class="accordion__link">
<img class="accordion__link__img" src="assets/pdf-blue.svg" alt="pdf" />
<p class="accordion__link__text">Download Vorbereitungsbogen (PDF)</p>
</div>
</div>
<div class="accordion-line"></div>
<button class="accordion__wrapper__item">7. Fälligkeit des Kaufpreises</button>
<div class="accordion__wrapper__panel">
<div class="accordion__link">
<img class="accordion__link__img" src="assets/pdf-blue.svg" alt="pdf" />
<p class="accordion__link__text">Glossar zu Grundstücks- und Hauskaufverträgen (PDF)</p>
</div>
<div class="accordion__link">
<img class="accordion__link__img" src="assets/pdf-blue.svg" alt="pdf" />
<p class="accordion__link__text">Merkblatt zum Kauf eines gebrauchten Hauses (PDF)</p>
</div>
</div>
<div class="accordion-line"></div>
</section>