Question

我的实际问题是我有三个段落，所以每个都有不同的高度。我已经为第一段应用了slideUp（）效果，为第二段应用了slideDown（）效果。并在第一段和第二段之间放置按钮。如果单击按钮，第一段将向上滑动，第二段将向下滑动。该动作完美但我需要的如果第一段向上滑动它滚动到第三段。如何在第二段停止它。

Answer 1

我建议使用以下代码：

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

Working : Demo

<强>更新

更好的解决方案：

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

Working : Demo

Answer 2

在移动设备或重新调整桌面浏览器尺寸到移动宽度

时尝试此操作

<!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>

Answer 3

您可以尝试$(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>

Vid

在特定元素处停止jQuery slideUp（）

3 个答案: