Как я могу сделать прокрутку 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, это всего лишь пример из двух.

У меня есть 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
 );