在显示最初隐藏在Jquery中的div时向上滚动一个div？

Question

我是jQuery的新手。

我想根据其ID显示div，并在显示时我需要向上滚动。

div最初是隐藏的。

我尝试运行以下代码，但它没有向上滚动，它显示在页面底部，我需要向下滚动才能查看div。

HTML

<ul>
    <li>
        <a class="page-scroll" href="#registerDiv" id="register">Redeem</a>
    </li>
</ul>

<section id="registerDiv" ng-controller="registerCtrl">
<!-- section will show when link is clicked -->
</section>

JS

$(document).ready(function(){
    $("#registerDiv").hide();
    $("#register").click(function(){
        $("#registerDiv").show("slow"); //need to slideUp here
    });
});

有人可以帮我解决这个问题吗？提前谢谢。

Answer 1

您只需使用.slideToggle()。

更新：在获得#registerDiv之前，您需要显示.show().offset().top 然后在滚动后隐藏和slideDown()。

参见示例：

$(document).ready(function() {
  $("#registerDiv").hide();
  $("#register").click(function() {
    var dt = $("#registerDiv").show().offset().top
    $("#registerDiv").hide();
    $('html,body').animate({
        scrollTop: dt
      },
      'slow', function() {
        $("#registerDiv").slideDown();
      });
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li>
    <a class="page-scroll" href="#registerDiv" id="register">Redeem</a>
  </li>
</ul>
<p>some conetent before</p>
<p>some conetent before</p>
<p>some conetent before</p>
<p>some conetent before</p>
<p>some conetent before</p>

<section id="registerDiv" ng-controller="registerCtrl">
  something to show this section when clicked
</section>

<p>some conetent after</p>
<p>some conetent after</p>
<p>some conetent after</p>
<p>some conetent after</p>
<p>some conetent after</p>
<p>some conetent after</p>
<p>some conetent after</p>
<p>some conetent after</p>

Answer 2

给你粗略的想法。现在你如何使用你的逻辑技能。快乐的编码：）

<ul>
    <li >
       <button id="register" style="margin-top: 50%;">Redeem</button>
    </li>
 </ul> 

<section id="registerDiv" ng-controller="registerCtrl" style="display:none">
I am on the top
</section>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("#register").click(function(){
        window.scrollTo(0,0);

        $('#registerDiv').animate({
        'marginTop' : "-50%" //moves top
        });

        $('#registerDiv').show();

    });
});
</script>