Анимация скольжения / спуска только в одном разделе

#javascript #jquery #css

Вопрос:

У меня простая проблема с моим кодом jQuery. Я создал ряд jumbotrons, и некоторые из этих jumbotrons скрыты с помощью CSS, и при нажатии кнопки я их отображаю. Это работает для меня, но у меня проблема с анимацией при событии slideUp. Я хочу посмотреть, как мои джамботроны медленно и анимированно скрываются, но когда я нажимаю на свою кнопку, анимация Show less переходит в нижнюю часть страницы, а не обратно к примеру заголовка, как я хочу.

вот мой код на codepen.io

 $("#pr").click(function() {
  if ($(this).text() == "Show more") {
    $(this).html("<button class="btn custom-btn1 " type="submit">Show less</button></a>");
    $(".hide-me").slideDown(1000);
  } else {
    $(this).html("<button class="btn custom-btn1 " type="submit">Show more</button></a>");
    $(".hide-me").slideUp("slow");
  }
  return false;
});

1. Я не совсем понимаю, в чем проблема, я просмотрел Codepen, и, кроме одного из всплывающих элементов, я не вижу ничего плохого

2. я хочу, чтобы это работало так: codepen.io/mask1/pen/dyXYEBx итак, при нажатии кнопки он прокручивается обратно в начало моего раздела, но если я добавлю второй раздел, он всегда прокручивается вниз… как в моем первом сообщении

3. Добавить window.scrollTo(0,$("#top-h2-with-text-example").position().top); перед $(".hide-me").slideUp("slow");

Ответ №1:

Вы можете добавить анимацию (которая не ставится в очередь) для прокрутки вверх сразу после вызова slideUp .

 $("#pr").click(function() {
  if ($(this).text() == "Show more") {
    $(this).html("<button class="btn custom-btn1 " type="submit">Show less</button></a>");
    $(".hide-me").slideDown(1000);
  } else {
    $(this).html("<button class="btn custom-btn1 " type="submit">Show more</button></a>");
    $(".hide-me").slideUp("slow");
    const body = $("html, body");
    body.animate({scrollTop: $(".portfolio").offset().top}, {queue: false});
  }
  return false;
});

1. но это не плавная анимация… :/

2. @mask Я обновил ответ — вместо обратного вызова просто создайте другую анимацию, которая не попадает в очередь.

3. это прокрутка к началу страницы. и у меня есть еще один раздел перед разделом с jumbotrons, и я хочу прокручивать только до начала раздела с jumbotrons.

4. @mask Я обновил пример, вам просто нужно прокрутить до верхней позиции раздела портфолио.