Stop jQuery slideUp() at specific element

Question

My actual problem is I have three paragraph so each are different height. I've applied slideUp() effect for first paragraph and slideDown() effect for second paragraph. And placed button in between first and second paragraph. If click the button first paragraph will slide up and second will slidedown. The action works perfectly but what I need If first paragraph slide up it scroll to third paragraph. How can I stop it on second paragraph.

Answer 1

I would suggest to use following code:

$(document).ready(function () {
    $("#show").click(function () {
        $("body").animate({ scrollTop: 0 });
        $(".one").slideUp();
    });
});

Working : Demo

Updated

Better Solution:

$(document).ready(function () {
  $("#show").click(function () {
      $(window).scrollTop(0)
      $(".one").slideUp();
  });
});

Working : Demo

Answer 2

You can try scrollTop

$(document).ready(function () {
    $("#show").click(function () {
        $(".two").show("slow");
        $(".one").hide("slow", function(){
		$('html, body').animate({
        scrollTop: $(".two").offset().top
    	}, 500);
            });
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p class="one" style="color:blue;">If you click on the "Hide" button, I will disappear.If you click on the "Hide" button, I will disappearIf you click on the "Hide" button, I will disappearIf you click on the "Hide" button, I will disappearIf you click on the "Hide" button, I will disappearIf you click on the "Hide" button, I will disappearIf you click on the "Hide" button, I will disappearIf you click on the "Hide" button, I will disappearIf you click on the "Hide" button, I will disappearIf you click on the "Hide" button, I will disappearIf you click on the "Hide" button, I will disappearIf you click on the "Hide" button, I will disappearIf you click on the "Hide" button, I will disappearIf you click on the "Hide" button, I will disappearIf you click on the "Hide" button, I will disappearIf you click on the "Hide" button, I will disappearIf you click on the "Hide" button, I will disappearIf you click on the "Hide" button, I will disappearIf you click on the "Hide" button, I will disappearIf you click on the "Hide" button, I will disappearIf you click on the "Hide" button, I will disappearIf you click on the "Hide" button, I will disappearIf you click on the "Hide" button, I will disappearIf you click on the "Hide" button, I will disappearIf you click on the "Hide" button, I will disappearIf you click on the "Hide" button, I will disappearIf you click on the "Hide" button, I will disappearIf you click on the "Hide" button, I will disappearIf you click on the "Hide" button, I will disappearIf you click on the "Hide" button, I will disappearIf you click on the "Hide" button, I will disappearIf you click on the "Hide" button, I will disappearIf you click on the "Hide" button, I will disappearIf you click on the "Hide" button, I will disappearIf you click on the "Hide" button, I will disappearIf you click on the "Hide" button, I will disappearIf you click on the "Hide" button, I will disappearIf you click on the "Hide" button, I will disappearIf you click on the "Hide" button, I will disappearIf you click on the "Hide" button, I will disappearIf you click on the "Hide" button, I will disappearIf you click on the "Hide" button, I will disappearIf you click on the "Hide" button, I will disappearIf you click on the "Hide" button, I will disappearIf you click on the "Hide" button, I will disappearIf you click on the "Hide" button, I will disappearIf you click on the "Hide" button, I will disappearIf you click on the "Hide" button, I wilthe "Hide" button, I will disappearIf you click on the "Hide" button, I will disappearIf you click on the "Hide" button, I will disappearIf you click on the "Hide" button, I will disappearIf you click on the "Hide" button, I will dthe "Hide" button, I will disappearIf you click on the "Hide" button, I will disappearIf you click on the "Hide" button, I will disappearIf you click on the "Hide" button, I will disappearIf you click on the "Hide" button, I will dthe "Hide" button, I will disappearIf you click on the "Hide" button, I will disappearIf you click on the "Hide" button, I will disappearIf you click on the "Hide" button, I will disappearIf you click on the "Hide" button, I will dl disappearIf you click on the "Hide" button, I will disappearIf you click on the "Hide" button, I will disappearIf you click on the "Hide" button, I will disappearIf you click on the "Hide" button, I will disappearIf you click on the "Hide" button, I will disappearIf you click on the "Hide" button, I will disappearIf you click on the "Hide" button, I will disappearIf you click on the "Hide" button, I will disappearIf you click on the "Hide" button, I will disappearIf you click on the "Hide" button, I will disappearIf you click on the "Hide" button, I will disappearIf you click on the "Hide" button, I will disappearIf you click on the "Hide" button, I will disappear</p>

        <button id="show" >Show</button>

        <div class="two" style="color:green;">rIf you click on the "Hide" button, I will disappearIf you click on the "Hide" button, I will disappearIf you click on the "Hide" button, I will disappearIf you click on the "Hide" button, I will disappearIf you click on the "Hide" button, I will disappearIf you click on the "Hide" button, I will disappearIf you click on the "Hide" button, I will disappearIf you click on the "Hide" button, I will disappearIf you click on the "Hide" button, I will disappearIf you click on the "Hide" button, I will disappearIf you click on the "Hide" button, I will disappearIf you click on the "Hide" button, I will disappearIf you click on the "Hide" button, I will disappearIf you click on the "Hide" button, I will disappearIf you click on the "Hide" button, I will disappearIf you click on the "Hide" button, I will disappearIf you click on the "Hide" button, I will disappearIf you click on the "Hide" button, I will disappearIf you click on the "Hide" button, I will disappearIf you click on the "Hide" button, I will disappearIf you click on t</div>

        <p class="three">
            utton, I will disappearIf you click on the "Hide" button, I will disappearIf you click on the "Hide" button, I will disappearIf you click on the "Hide" button, I will disappearIf you click on the "Hide" button, I will disappearIf you click on the "Hide" button, I will disappearIf you click on the "Hide" button, I will disappearIf you click on the "Hide" button, I will disappearIf you click on the "Hide" button, I will disappearIf you click on the "Hide" button, I will disappearIf you click on the "Hide" button, I will disappearIf you click on the "Hide" button, I will disappearIf you click on the "Hide" button, I will disappearIf you c
        </p>

Answer 3

Try this in mobile or re-size desktop browser size to mobile width

<!DOCTYPE html>
<html>
    <head>
        <script      src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
        <script>
            $(document).ready(function(){
                $("#show").click(function(){
  $(".two").show("slow");
                    $(".one").hide("slow");

                });
            });
        </script>
    </head>
    <body>

        <p class="one" style="color:blue;">If you click on the "Hide" button, I will disappear.If you click on the "Hide" button, I will disappearIf you click on the "Hide" button, I will disappearIf you click on the "Hide" button, I will disappearIf you click on the "Hide" button, I will disappearIf you click on the "Hide" button, I will disappearIf you click on the "Hide" button, I will disappearIf you click on the "Hide" button, I will disappearIf you click on the "Hide" button, I will disappearIf you click on the "Hide" button, I will disappearIf you click on the "Hide" button, I will disappearIf you click on the "Hide" button, I will disappearIf you click on the "Hide" button, I will disappearIf you click on the "Hide" button, I will disappearIf you click on the "Hide" button, I will disappearIf you click on the "Hide" button, I will disappearIf you click on the "Hide" button, I will disappearIf you click on the "Hide" button, I will disappearIf you click on the "Hide" button, I will disappearIf you click on the "Hide" button, I will disappearIf you click on the "Hide" button, I will disappearIf you click on the "Hide" button, I will disappearIf you click on the "Hide" button, I will disappearIf you click on the "Hide" button, I will disappearIf you click on the "Hide" button, I will disappearIf you click on the "Hide" button, I will disappearIf you click on the "Hide" button, I will disappearIf you click on the "Hide" button, I will disappearIf you click on the "Hide" button, I will disappearIf you click on the "Hide" button, I will disappearIf you click on the "Hide" button, I will disappearIf you click on the "Hide" button, I will disappearIf you click on the "Hide" button, I will disappearIf you click on the "Hide" button, I will disappearIf you click on the "Hide" button, I will disappearIf you click on the "Hide" button, I will disappearIf you click on the "Hide" button, I will disappearIf you click on the "Hide" button, I will disappearIf you click on the "Hide" button, I will disappearIf you click on the "Hide" button, I will disappearIf you click on the "Hide" button, I will disappearIf you click on the "Hide" button, I will disappearIf you click on the "Hide" button, I will disappearIf you click on the "Hide" button, I will disappearIf you click on the "Hide" button, I will disappearIf you click on the "Hide" button, I will disappearIf you click on the "Hide" button, I will disappearIf you click on the "Hide" button, I wilthe "Hide" button, I will disappearIf you click on the "Hide" button, I will disappearIf you click on the "Hide" button, I will disappearIf you click on the "Hide" button, I will disappearIf you click on the "Hide" button, I will dthe "Hide" button, I will disappearIf you click on the "Hide" button, I will disappearIf you click on the "Hide" button, I will disappearIf you click on the "Hide" button, I will disappearIf you click on the "Hide" button, I will dthe "Hide" button, I will disappearIf you click on the "Hide" button, I will disappearIf you click on the "Hide" button, I will disappearIf you click on the "Hide" button, I will disappearIf you click on the "Hide" button, I will dl disappearIf you click on the "Hide" button, I will disappearIf you click on the "Hide" button, I will disappearIf you click on the "Hide" button, I will disappearIf you click on the "Hide" button, I will disappearIf you click on the "Hide" button, I will disappearIf you click on the "Hide" button, I will disappearIf you click on the "Hide" button, I will disappearIf you click on the "Hide" button, I will disappearIf you click on the "Hide" button, I will disappearIf you click on the "Hide" button, I will disappearIf you click on the "Hide" button, I will disappearIf you click on the "Hide" button, I will disappearIf you click on the "Hide" button, I will disappear</p>

        <button id="show" >Show</button>

        <div class="two" style="color:green;">rIf you click on the "Hide" button, I will disappearIf you click on the "Hide" button, I will disappearIf you click on the "Hide" button, I will disappearIf you click on the "Hide" button, I will disappearIf you click on the "Hide" button, I will disappearIf you click on the "Hide" button, I will disappearIf you click on the "Hide" button, I will disappearIf you click on the "Hide" button, I will disappearIf you click on the "Hide" button, I will disappearIf you click on the "Hide" button, I will disappearIf you click on the "Hide" button, I will disappearIf you click on the "Hide" button, I will disappearIf you click on the "Hide" button, I will disappearIf you click on the "Hide" button, I will disappearIf you click on the "Hide" button, I will disappearIf you click on the "Hide" button, I will disappearIf you click on the "Hide" button, I will disappearIf you click on the "Hide" button, I will disappearIf you click on the "Hide" button, I will disappearIf you click on the "Hide" button, I will disappearIf you click on t</div>

        <p class="three">
            utton, I will disappearIf you click on the "Hide" button, I will disappearIf you click on the "Hide" button, I will disappearIf you click on the "Hide" button, I will disappearIf you click on the "Hide" button, I will disappearIf you click on the "Hide" button, I will disappearIf you click on the "Hide" button, I will disappearIf you click on the "Hide" button, I will disappearIf you click on the "Hide" button, I will disappearIf you click on the "Hide" button, I will disappearIf you click on the "Hide" button, I will disappearIf you click on the "Hide" button, I will disappearIf you click on the "Hide" button, I will disappearIf you c
        </p>

    </body>
</html>