如何在點擊時讓 div 滾動到頁面頂部？

Question

我在頁面上有一組按鈕，當有人點擊時，我希望按鈕展開並滾動到頁面頂部（視口高度，而不是實際頂部）。 這是我的代碼 -

<div class="team-header" id="brian">
    <div class="teamlogo">
        <img src="images/logos/wolves.png" />
        <h1>Brian</h1>
    </div>
  </div>
  <div class="brian-roster team-rosters">
    <?php include ('brian.php'); ?>
  </div>

    <div class="team-header" id="carlos">
    <div class="teamlogo">
        <img src="images/logos/leverkusen.png" />
        <h1>Carlos</h1>
    </div>
  </div>

  <div class="carlos-roster team-rosters">
    <?php include ('carlos.php'); ?>
  </div>

總共有 14 個 div，這只是其中兩個的示例。

我每個都有這個 jQuery 代碼 -

  const brianRoster = $(".brian-roster");
  const brianID = $("#brian");

  brianID.on("click", function () {
    $("html, body").animate(
      {
        scrollTop: $("#brian").offset().top - 60,
      },
      100
    );
    $(brianRoster).slideToggle(700);
  });

（-60 是為了補償粘性標題）

現在，如果您單擊按鈕，它會展開但不會滾動到頂部。 如果再次單擊該按鈕，它會折疊（應該如此），然后滾動到頂部。

我怎樣才能讓它滾動到頂部？

Answer 1

嘗試這個：

$(window).scrollTop(0); 

代替

scrollTop: $("#brian").offset().top - 60,

或嘗試

$("html, body").animate(
  {
    scrollTop: $("#brian").offset().top,
  },
   slow
 );