slideUp/slideDown 动画仅在一个部分

Question

I have simple problem with my jQuery code. I created row of jumbotrons and a few of this jumbotrons are hidden with CSS and on button click I display them. This work for me but I have a problem with the animation on event slideUp. I want to see how my jumbotrons are slowly and animated hidden but when I click on my button Show less animation goes to bottom of page - not back to heading Example as I want.

here is my code on 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;
});

Answer 1

You could add an animation (that doesn't get queued) to scroll up straight after slideUp is called.

$("#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;
});