如何在jQuery中将div滚动到顶部并产生缓动效果？

Question

I want to show a scrolling effect with click event , so i have a page with two divs. One works at the page load and another div, I want to hide and when a button with sign up is clicked it should come up top with scroll effect and become visible with form.

please help as i am newbie in jquery

Answer 1

Try this, it is the full script

<div style="height:300px;width:50px;border:1px solid #a0a0a0;background-color:#c0c0c0">
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js">
</script>
<button id="show">Show</button>
<button id="hide">Hide</button>
<script>
$(document).ready(function(){
  $("#hide").click(function(){
    $("div").slideUp();
  });
  $("#show").click(function(){
    $("div").slideDown();
  });
});
</script>

To verify you can take help of http://htmledit.squarefree.com/

Answer 2

Is this what you want? Check DEMO http://jsfiddle.net/yeyene/reWwx/303/

$(document).ready(function(){
    $('#signUp').on('click',function(){
        $('html, body').animate({
            scrollTop: 0
        }, 1000, function() {
            $('#myForm').fadeIn(500);
        });
    });
});