如何使 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);&nbsp;代替scrollTop: $("#brian").offset().top - 60,或尝试$("html, body").animate(&nbsp; {&nbsp; &nbsp; scrollTop: $("#brian").offset().top,&nbsp; },&nbsp; &nbsp;slow&nbsp;);