javascript - Accordion 网页滚动错误

我正在我的网站上工作，但我无法解决我遇到的一个 javascript 问题:

我有一个 Accordion 类型的页面，我现在称之为菜单，当我点击它们时我可以打开/向下滑动主题，那里将显示关于该主题的更多信息。我正在使用在 JS 中完成的平滑滚动。我将其结构化为 Accordion 的“accmain”和单击accmain 时出现的内容的“accsub”。由于我希望两个主题之间的过渡平滑，所以我希望最后一个“accmain”关闭相应的“accsub”，然后顺利转到新的“accmain”，将其对齐顶部并打开新的“accsub”。

现在到目前为止一切都很好。我遇到的唯一问题是，当您打开另一个主题时，另一个主题仍处于打开状态: 它不会将新的 accmain 对齐到顶部，而是将整个滚动移动到之前打开但现在应该关闭的“accsub”的高度。因此，新主题未与顶部对齐，但最终移动了这么远(取决于最后一个主题及其高度)，以至于您看不到任何内容。我想这实际上是一个非常简单的问题，虽然我对 javascript 非常陌生，但我知道它确实在改变之前的 accsub 像素数量。这是一个开始:)

这是一个Fiddle

谢谢大家，我很感激任何帮助。我现在花了几周的时间来解决这个问题。

/* multi-toggle accordion*/
$(document).ready(function() {
  $(".accsub").hide();
  $('.accmain').click(function() {
    $( this ).toggleClass( "miau100" );
    if ($(this).next().is(":visible")) {
      $(this).next().slideUp('fast');
      $('html,body').animate({
        scrollTop: $(this).offset().top - 150
      }, 'slow');
      $( this ).toggleClass( "miau75" );
    } else {
      $('.accsub:visible').slideUp('fast');
      $(this).next().slideDown('fast');
      $('html,body').animate({
        scrollTop: $(this).offset().top
      }, 'slow');
    }
  });
});

/* GO TO TOP BUTTON */
$(document).ready(function() {
  $("a[href='#top']").click(function() {
    $('.accsub:visible').slideUp('fast');
    $("html, body").animate({
      scrollTop: 0
    }, "slow");
    return false;
  });
});

@import url('https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i');
header > .accmain {
  height: 150px;
}

p1 > .accmain:hover {
  color: grey
}

footer {
  min-height: 150px;
}

* {
  box-sizing: border-box;
}

.beitrag {}

.accmain {
  display: flex;
  justify-content: center;
  min-height: 3em;
  background-color: #FFF;
  cursor: pointer;
  text-align: left;
  border-bottom: solid 1px #585858;
  padding: 1px;
  color: #585858;
  opacity: 0.75;
}

.accmain:hover {
  /*   background-color: #b3b3b3;  */ 
  transition: ease-in-out 0.7s;
  color: black;
  opacity: 1.0;
}

.miau100 {
  opacity: 1.0;
}

.miau75 {
  opacity: 0.75;
}


.accsub {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* horizontale zentrierung = wenn column dann align-items: center; ansonsten justify-content: center;*/
  background-color: #FFF;
  border-bottom: solid 1px #625750;
  padding-left: 10%;
  padding-right: 10%;
}

.imagewrap img {
  max-height: 100%;
  max-width: 100%;
  margin-bottom: 40px;
}

.topbutton {
  position: fixed;
  width: 50px;
  height: 50px;
  top: 90%;
  left: 90%;
  text-align: center;
  padding-top: 15px;
  padding-bottom: 15px;
  -moz-border-radius: 50px;
  -webkit-border-radius: 50px;
  background-color: rgba(0, 0, 0, 0.1);
  font-size: 2em;
  text-decoration: none;
  color: #000;
  transition: ease 0.7s;
}

.topbutton:hover {
  background-color: rgba(0, 0, 0, 0.3);
  transition: ease 0.7s;
}

.text {
  width: 722px;
  font-size: 1em;
}

.newspaper {
  -webkit-column-count: 2;
  /* Chrome, Safari, Opera */
  -moz-column-count: 2;
  /* Firefox */
  column-count: 2;
  font-family: Roboto, sans-serif;
  font-size: 14px;
  font-style: light;
  font-variant: normal;
  font-weight: 300;
  line-height: 26.4px;
  margin-top: 80px;
  margin-bottom: 80px;
  max-width: 722px;
}

.newspaper2 {
  -webkit-column-count: 2;
  /* Chrome, Safari, Opera */
  -moz-column-count: 2;
  /* Firefox */
  column-count: 2;
  font-family: Roboto, sans-serif;
  font-size: 14px;
  font-style: light;
  font-variant: normal;
  font-weight: 500;
  line-height: 26.4px;
  margin-top: 40px;
  margin-bottom: 40px;
  max-width: 722px;
}

.newspaper3 {
  -webkit-column-count: 1;
  /* Chrome, Safari, Opera */
  -moz-column-count: 1;
  /* Firefox */
  column-count: 1;
  font-family: Roboto, sans-serif;
  font-size: 1em;
  font-style: normal;
  font-variant: normal;
  font-weight: 500;
  line-height: 26.4px;
  max-width: 722px;
  align-items: left;
}

h1 {
  font-family: Roboto, sans-serif;
  font-size: 24px;
  font-style: light;
  font-variant: normal;
  font-weight: 500;
  line-height: 26.4px;
}

h2 {
  font-family: Roboto, sans-serif;
  font-size: 32px;
  font-style: bold;
  font-variant: normal;
  font-weight: 500;
  line-height: 15.4px;
}

h3 {
  display: inline;
  margin: 0px;
  font-family: Roboto, sans-serif;
  font-size: 12px;
  font-style: bold;
  font-variant: normal;
  font-weight: 500;
  line-height: 15.4px;
}

p {
  display: inline;
  margin: 0px;
  font-family: Roboto, sans-serif;
  font-size: 14px;
  font-style: normal;
  font-variant: normal;
  font-weight: 500;
  line-height: 20px;
}

p1 {
  display: inline;
  margin: 0px;
  font-family: Roboto, sans-serif;
  font-size: 14px;
  font-style: normal;
  font-variant: normal;
  font-weight: 500;
  line-height: 20px;
  color: #A4A4A4;
  margin-left: 10px;
}


pre {
  font-family: Roboto, sans-serif;
  font-size: 13px;
  font-style: normal;
  font-variant: normal;
  font-weight: 400;
  line-height: 18.5714px;
  align-items: left;
}

blockquote {
  font-family: Garamond, Baskerville, "Baskerville Old Face", "Hoefler Text", "Times New Roman", serif;
  font-size: 21px;
  font-style: normal;
  font-variant: normal;
  font-weight: 400;
  line-height: 30px;
}

hr {
  width: 100%;
  height: 1px;
  margin: 0 auto;
  color: black;
}

<!DOCTYPE html>
<html lang="de-de">

  <meta charset="UTF-8">
  <meta name="Bartek Juretko" content="Künstler">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <link rel="icon" href="favicon.png" sizes="16x16" type="image/png">


  <body class="all">

    <header>
      <div class="accmain">
        <!-- erstes kind-->
        <div class="text">
          <h2>BARTEK JURETKO</h2></div>
      </div>
      <div class="accsub">

        <div class="newspaper">
          Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex
          ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit
          augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
          nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit
          in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor
          cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat
          volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore
          eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming
          id quod mazim placerat facer possim assum.
        </div>
      </div>


    </header>


    <div class="beitrag">
      <div class="accmain">
        <div class="text">
          <h1>AStA Cafe<p1>27.01.2015</p1></h1></div>
      </div>
      <div class="accsub">

        <div class="newspaper">Astacafe Hagen, Kunstakademie Duesseldorf
          <br>
          <br>
          <br> Fertigstellung und Eroeffnung
          <br>
          <br> Der Umbau des Astacafes in der Kunstakademie Duesseldorf hat einen kroenenden Abschluss gefunden: Am 27. Januar 2015 um 19 Uhr wurde das Cafe feierlich eroeffnet. Zur Eroeffnung gab es feinste Koestlichkeiten in Form eines vier Gaenge Menues.
          <br> Das Astacafe hat Mo-Fr von 12-19 Uhr geoeffnet.
          <br>
          <br> Mit Louisa Rossner, Duesseldorf, 2014-15
          <br>
          <br>
        </div>

        <div class="imagewrap">
          <img src="http://www.umbraframework.de/2270.jpg">
        </div>
      </div>
    </div>


    <div class="beitrag">
      <div class="accmain">
        <div class="text">
          <h1>Ausführung Service-Theke im Sparta<p1>18.04.2017</p1></h1>
        </div>
      </div>
      <div class="accsub">

        <div class="newspaper2">
          Fertigstellung und Eroeffnung
          <br>
          <br> Der Umbau des Astacafes in der Kunstakademie Duesseldorf hat einen kroenenden Abschluss gefunden: Am 27. Januar 2015 um 19 Uhr wurde das Cafe feierlich eroeffnet. Zur Eroeffnung gab es feinste Koestlichkeiten in Form eines vier Gaenge Menues.
          <br> Das Astacafe hat Mo-Fr von 12-19 Uhr geoeffnet.
          <br>
          <br> Mit Louisa Rossner, Duesseldorf, 2014-15
        </div>
        <div class="imagewrap">
          <img src="http://www.umbraframework.de/2270.jpg">
        </div>
      </div>
    </div>

    <div class="beitrag">
      <div class="accmain">
        <div class="text">
          <h1>Publikation im Salon Magazin Nr.4<p1>04.2017</p1></h1></div>
      </div>
      <div class="accsub">
        <?php
echo date("d.m.Y H:i:s");
?>
      </div>
      <div class="imagewrap"></div>
    </div>

    <div class="beitrag">
      <div class="accmain">
        <div class="text">
          <h1>Kunstakademie Düsseldorf Rundgang 2017, Teilnahme<p1>02.2017</p1></h1></div>
      </div>
      <div class="accsub">subcontent...</div>
      <div class="imagewrap"></div>
    </div>

    <div class="beitrag">
      <div class="accmain">
        <div class="text">
          <h1>kunstakademie.gallery, Ausstellungsteilnahme&Tab;<p1>12.2016</p1></h1></div>
      </div>
      <div class="accsub">subcontent...</div>
      <div class="imagewrap"></div>
    </div>

    <div class="beitrag">
      <div class="accmain">
        <div class="text">
          <h1>'art-hoc' im Reservat, Ausstellungsteilnahme&Tab;<p1>12.2016</p1></h1></div>
      </div>
      <div class="accsub">subcontent...</div>
      <div class="imagewrap"></div>
    </div>






    <div class="beitrag">
      <div class="accmain">
        <div class="text">
          <h1>kunst kann's 2016, Kunstauktion Teilnahme<p1>11.2016</p1></h1></div>
      </div>
      <div class="accsub">subcontent...</div>
      <div class="imagewrap"></div>
    </div>

    <div class="beitrag">
      <div class="accmain">
        <div class="text">
          <h1>kunstakademie.gallery, Ausstellungsteilnahme<p1>08.2016</p1></h1></div>
      </div>
      <div class="accsub">subcontent...</div>
      <div class="imagewrap"></div>
    </div>

    <div class="beitrag">
      <div class="accmain">
        <div class="text">
          <h1>TOTAL, Ausstellungsteilnahme<p1>08.2016</p1></h1></div>
      </div>
      <div class="accsub">subcontent...</div>
      <div class="imagewrap"></div>
    </div>

    <div class="beitrag">
      <div class="accmain">
        <div class="text">
          <h1>ad absurdum im HINTERZIMMER, Ausstellung<p1>08.2016</p1></h1></div>
      </div>
      <div class="accsub">subcontent...</div>
      <div class="imagewrap"></div>
    </div>

    <div class="beitrag">
      <div class="accmain">
        <div class="text">
          <h1>Cafe RAT und TAT, Aktion und Ausstellung<p1>08.2016</p1></h1></div>
      </div>
      <div class="accsub">subcontent...</div>
      <div class="imagewrap"></div>
    </div>

    <div class="beitrag">
      <div class="accmain">
        <div class="text">
          <h1>Absolventenstipendium 2016 der Freunde und Förderer<p1>07.2016</p1></h1></div>
      </div>
      <div class="accsub">subcontent...</div>
      <div class="imagewrap"></div>
    </div>

    <div class="beitrag">
      <div class="accmain">
        <div class="text">
          <h1>Baukunstkammer, Abschlussausstellung und Akademiebrief<p1>07.2016</p1></h1></div>
      </div>
      <div class="accsub">subcontent...</div>
      <div class="imagewrap"></div>
    </div>

    <div class="beitrag">
      <div class="accmain">
        <div class="text">
          <h1>'art-hoc' in den Ex-Achenbach-Hallen, Ausstellungsteilnahme<p1>03.2016</p1></h1></div>
      </div>
      <div class="accsub">subcontent...</div>
      <div class="imagewrap"></div>
    </div>

    <div class="beitrag">
      <div class="accmain">
        <div class="text">
          <h1>Trockenbauwand<p1>04.2016</p1></h1></div>
      </div>
      <div class="accsub">subcontent...</div>
      <div class="imagewrap"></div>
    </div>

    <div class="beitrag">
      <div class="accmain">
        <div class="text">
          <h1>Habe Meine Hölzer Sortiert<p1>03.2016</p1></h1></div>
      </div>
      <div class="accsub">subcontent...</div>
      <div class="imagewrap"></div>
    </div>

    <div class="beitrag">
      <div class="accmain">
        <div class="text">
          <h1>Kunstakdemie Düsseldorf Rundgang 2016, Teilnahme<p1>01.2016</p1></h1></div>
      </div>
      <div class="accsub">subcontent...</div>
      <div class="imagewrap"></div>
    </div>

    <div class="beitrag">
      <div class="accmain">
        <div class="text">
          <h1>Nischenpreis, Wettbewerbsteilnahme<p1>01.2016</p1></h1></div>
      </div>
      <div class="accsub">subcontent...</div>
      <div class="imagewrap"></div>
    </div>

    <div class="beitrag">
      <div class="accmain">
        <div class="text">
          <h1>Friesenberg Heidelberg, Entwurf<p1>11.2015</p1></h1></div>
      </div>
      <div class="accsub">subcontent...</div>
      <div class="imagewrap"></div>
    </div>

    <div class="beitrag">
      <div class="accmain">
        <div class="text">
          <h1>kunst kann's 2015, Kunstauktion Teilnahme<p1>11.2015</p1></h1></div>
      </div>
      <div class="accsub">subcontent...</div>
      <div class="imagewrap"></div>
    </div>

    <div class="beitrag">
      <div class="accmain">
        <div class="text">
          <h1>Wystawa Plastyki Zagłębia Miedziowego 2015, Ausstellungsteilnahme<p1>08.2015</p1></h1></div>
      </div>
      <div class="accsub">subcontent...</div>
      <div class="imagewrap"></div>
    </div>

    <div class="beitrag">
      <div class="accmain">
        <div class="text">
          <h1>CLASH, Ausstellung<p1>06.2015</p1></h1></div>
      </div>
      <div class="accsub">subcontent...</div>
      <div class="imagewrap"></div>
    </div>


    <div class="beitrag">
      <div class="accmain">
        <div class="text">
          <h1>Ein Europahaus für den Europatag im Düsseldorfer Rathaus<p1>09.2015</p1></h1></div>
      </div>
      <div class="accsub">Entwurf des 'Europahauses' fuer 'We Are Europe' Zum sogenannten Europatag, am 9.Mai, einem Jahrestag der bisher eher als das 'Ende des Zweiten Weltkrieges' bekannt ist, entstand ein Entwurf fuer die von der Organisation 'We Are Europe' geplante
        Aktion aus Kartons ein Haus fuer Europa zu bauen. Die Besucher beteiligten sich aktiv an einer Beschriftung der Bausteine mit Werten, die sie mit Europa verbinden, und bauten so Stein fuer Stein das 'Europahaus' im Duesseldorfer Rathaus. Duesseldorfs
        Oberbuergermeister Thomas Geisel fing mit dem Grundstein an und eroeffnete zusammen mit der NRW-Ministerin Dr. Schwall-Dueren und dem Vorsitzenden von We Are Europe Jens Baganz um 11 Uhr die Aktion. Mit Aneta Dobozi, Duesseldorf, 2015 2. Foto:
        Melanie Zanin 4. Foto: We Are Europe www.duesseldorf.de www.we-are-europe.org </div>
      <div class="imagewrap"></div>
    </div>

    <div class="beitrag">
      <div class="accmain">
        <div class="text">
          <h1>Bauhausmuseum Dessau, Wettbewerbsbeitrag<p1>03.2015</p1></h1></div>
      </div>
      <div class="accsub">

        <div class="imagewrap">
          <img src="http://www.umbraframework.de/2270.jpg">
        </div>
        <div class="text">
          <div class="newspaper2">
            <br>Teilnahme Realisierungswettbewerb
            <br>
            <br>Staedtebaulich wirkt das Museum wie ein Solitaer umgeben von Vegetation, differenziert betrachtet unterscheiden sich die Geschosse: das Erdgeschoss adaptiert die Baufluchten der Ratsgasse, positioniert zwei Baukoerper in der Verlaengerung
            der sich in der Ratsgasse gegenueberstehenden Fassadenreihen und schafft dazwischen einen Hof, als gleich einen Durchgang zum Park in direkter Forfuehrung der Ratsgasse. Wie im Cartesischen Dualismus stehen sich im Erdgeschoss zwar zwei Entitaeten
            gegenueber, werden aber im oberen Geschoss miteinander vereint zu einem einheitlichen Ganzen: der Ausstellungshalle, die als Buegel ueber beiden erdgeschossigen Koerpern schwebt. Es ist ein komplimentaeres Tor: von der Stadt zum Park und vom
            Park zur Stadt. Die Ausstellunghalle ist ganz bewusst angelehnt an den Gedanken von grossen Messehallen, die Flexibilitaet und Moeglichkeiten bewahren, um der Ausstellungsarchitektur mehr Freiraum zu lassen.
            <br>
            <br>Dessau, 2015</div>
        </div>
      </div>
    </div>

    <div class="beitrag">
      <div class="accmain">
        <div class="text">
          <h1>Kunstakademie Düsseldorf Rundgang 2015, Teilnahme<p1>02.2015</p1></h1></div>
      </div>
      <div class="accsub">subcontent...</div>
      <div class="imagewrap"></div>
    </div>

    <div class="beitrag">
      <div class="accmain">
        <div class="text">
          <h1>AStA Cafe Hagen, Fertigstellung<p1>01.2015</p1></h1></div>
      </div>
      <div class="accsub">subcontent...</div>
      <div class="imagewrap"></div>
    </div>

    <div class="beitrag">
      <div class="accmain">
        <div class="text">
          <h1>Helsinki Guggenheim Museum, Wettbewerbsteilnahme<p1>10.2014</p1></h1></div>
      </div>
      <div class="accsub">subcontent...</div>
      <div class="imagewrap"></div>
    </div>

    <div class="beitrag">
      <div class="accmain">
        <div class="text">
          <h1>Kleine Brötchen Backen, Performance<p1>08.2014</p1></h1></div>
      </div>
      <div class="accsub">subcontent...</div>
      <div class="imagewrap"></div>
    </div>

    <div class="beitrag">
      <div class="accmain">
        <div class="text">
          <h1>Jaana Caspary VERSUS Bartek Juretko, Ausstellung<p1>08.2014</p1></h1></div>
      </div>
      <div class="accsub">subcontent...</div>
      <div class="imagewrap"></div>
    </div>

    <div class="beitrag">
      <div class="accmain">
        <div class="text">
          <h1>AStA Cafe Hagen in der Kunstakademie, Entwurf<p1>04.2014</p1></h1></div>
      </div>
      <div class="accsub">subcontent...</div>
      <div class="imagewrap"></div>
    </div>

    <div class="beitrag">
      <div class="accmain">
        <div class="text">
          <h1>17,98 EUR<p1>02.2014</p1></h1></div>
      </div>
      <div class="accsub">subcontent...</div>
      <div class="imagewrap"></div>
    </div>

    <div class="beitrag">
      <div class="accmain">
        <div class="text">
          <h1>Mercedes-Benz, Workshop<p1>2013/2014</p1></h1></div>
      </div>
      <div class="accsub">subcontent...</div>
      <div class="imagewrap"></div>
    </div>

    <div class="beitrag">
      <div class="accmain">
        <div class="text">
          <h1>Gestaltung Rundgangscafe, Vorschlag<p1>12.2013</p1></h1></div>
      </div>
      <div class="accsub">subcontent...</div>
      <div class="imagewrap"></div>
    </div>

    <div class="beitrag">
      <div class="accmain">
        <div class="text">
          <h1>Gerresheimer 100, Ausstellung<p1>10.2013</p1></h1></div>
      </div>
      <div class="accsub">subcontent...</div>
      <div class="imagewrap"></div>
    </div>

    <div class="beitrag">
      <div class="accmain">
        <div class="text">
          <h1>Den Toten Ihre Namen Geben, Engere Auswahl Wettbewerbsbeitrag</h1></div>
      </div>
      <div class="accsub">subcontent...</div>
      <div class="imagewrap"></div>
    </div>

    <div class="beitrag">
      <div class="accmain">
        <div class="text">
          <h1>Faerber, Ausstellungsteilnahme</h1></div>
      </div>
      <div class="accsub">subcontent...</div>
      <div class="imagewrap"></div>
    </div>

    <div class="beitrag">
      <div class="accmain">
        <div class="text">
          <h1>Stadt der Zukunft, Workshop</h1></div>
      </div>
      <div class="accsub">subcontent...</div>
      <div class="imagewrap"></div>
    </div>

    <div class="beitrag">
      <div class="accmain">
        <div class="text">
          <h1>Stadthaus in Wien, Wettbewerbsbeitrag</h1></div>
      </div>
      <div class="accsub">subcontent...</div>
      <div class="imagewrap"></div>
    </div>

    <div class="beitrag">
      <div class="accmain">
        <div class="text">
          <h1>Upcycling Berlin, Ausstellungsteilnahme</h1></div>
      </div>
      <div class="accsub">subcontent...</div>
      <div class="imagewrap"></div>
    </div>

    <div class="beitrag">
      <div class="accmain">
        <div class="text">
          <h1>Keine Kunst</h1></div>
      </div>
      <div class="accsub">subcontent...</div>
      <div class="imagewrap"></div>
    </div>

    <div class="beitrag">
      <div class="accmain">
        <div class="text">
          <h1>Brücke im Landschaftsschutzgebiet, Wettbewerbsbeitrag</h1></div>
      </div>
      <div class="accsub">subcontent...</div>
      <div class="imagewrap"></div>
    </div>

    <div class="beitrag">
      <div class="accmain">
        <div class="text">
          <h1>Upcycling Berlin, Wettbewerbsgewinn</h1></div>
      </div>
      <div class="accsub">subcontent...</div>
      <div class="imagewrap"></div>
    </div>

    <div class="beitrag">
      <div class="accmain">
        <div class="text">
          <h1>Keine Kunst</h1></div>
      </div>
      <div class="accsub">subcontent...</div>
      <div class="imagewrap"></div>
    </div>

    <div class="beitrag">
      <div class="accmain">
        <div class="text">
          <h1>Bibliothek in Daegu, Wettbewerbsbeitrag</h1></div>
      </div>
      <div class="accsub">subcontent...</div>
      <div class="imagewrap"></div>
    </div>

    <div class="beitrag">
      <div class="accmain">
        <div class="text">
          <h1>Findlinge Seminar auf der Architektur Biennale in Venedig</h1></div>
      </div>
      <div class="accsub">subcontent...</div>
      <div class="imagewrap"></div>
    </div>

    <div class="beitrag">
      <div class="accmain">
        <div class="text">
          <h1>Keine Kunst</h1></div>
      </div>
      <div class="accsub">subcontent...</div>
      <div class="imagewrap"></div>
    </div>

    <div class="beitrag">
      <div class="accmain">
        <div class="text">
          <h1>Architektur AG an der GGS Marienstrasse</h1></div>
      </div>
      <div class="accsub">subcontent...</div>
      <div class="imagewrap"></div>
    </div>

    <div class="beitrag">
      <div class="accmain">
        <div class="text">
          <h1>Entwurf Mehrfamilienwohnhaus in Indien</h1></div>
      </div>
      <div class="accsub">subcontent...</div>
      <div class="imagewrap"></div>
    </div>

    <div class="beitrag">
      <div class="accmain">
        <div class="text">
          <h1>Autodidaktische Weltkarte</h1></div>
      </div>
      <div class="accsub">subcontent...</div>
      <div class="imagewrap"></div>
    </div>

    <div class="beitrag">
      <div class="accmain">
        <div class="text">
          <h1>Neuer Entwurf für ein Grabmal</h1></div>
      </div>
      <div class="accsub">subcontent...</div>
      <div class="imagewrap"></div>
    </div>

    <div class="beitrag">
      <div class="accmain">
        <div class="text">
          <h1>Ny Valer Kirke, Wettbewerbsbeitrag</h1></div>
      </div>
      <div class="accsub">subcontent...</div>
      <div class="imagewrap"></div>
    </div>

    <div class="beitrag">
      <div class="accmain">
        <div class="text">
          <p>Impressum</p>
        </div>
      </div>
      <div class="accsub">subcontent...</div>
      <div class="imagewrap">
      </div>
    </div>

    <div>
      <a href="#top" class="topbutton">&#x2303;</a>
    </div>

    <footer>
      <a href="#top">Zum Anfang der Seite Scrollen</a>
    </footer>

</html>

最佳答案

也许这是适合您的解决方案:

$(document).ready(function(){

$(".accsub").hide();
    $(".accmain").click(function(){
    $(".accsub").hide();
        $(this).next(".accsub").slideToggle("fast");
    $('html, body').animate({
        scrollTop: $(this).offset().top - 1
    }, 'slow');
    });

});

我猜你想在每次点击它时将 accmain- 容器与浏览器的顶部对齐。并且不要忘记在 $(document).ready(function(){YOUR ENTIRE CODE GOES HERE} 中放置“GO TO THE TOP”，以便您的代码等待文档加载.

关于javascript - Accordion 网页滚动错误，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44323833/

javascript - Accordion 网页滚动错误

上一篇：html - 让图像在彼此下方排列

下一篇：css - 如何删除 Wordpress 主页底部的 "Older Posts"选项？