Thursday 25 October 2012

Scroll to an element smoothly using jQuery

To get a smooth scrolling effect using one line of jQuery.  You can use this small function of jQuery.  It works especially well with click.


<html>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script>
    $(document).ready(function (){
        $("#click").click(function (){       
                $('html, body').animate({
                    scrollTop: $("#div1").offset().top
                     }, 2000);
        });
    });
</script>
<div id="div1" style="height: 1000px; width 100px">
test
</div>
<br/>
<div id="div2" style="height: 1000px; width 100px">
test 2
</div>
<button id="click">click me</button>
</html>

No comments:

Post a Comment