如何在点击时让 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>

这些 div 总共有 14 个，这只是其中两个的示例。

我每个都有这个 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 是为了补偿一个sticky header）

现在，如果您单击按钮，它会展开但不会滚动到顶部。如果您再次单击该按钮，它会折叠（应该如此），然后滚动到顶部。

如何让它滚动到顶部？

Answer 1

试试这个：

$(window).scrollTop(0); 

而不是

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

或者试试

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