Semua Proses Animasi Scroll

<style type="text/css">
    *{
        margin: 0px;
        padding: 0px;
    }
    #menu{
        width: 100%;
        height: auto;
        float: left;
    }
    #menu ul{
        list-style: none;
    }
    #menu ul li{
        width: 150px;
        height:30px;
        color:#fff;
        padding: 5px 20px;
        background: #f00;
        float: left;
    }
    #artikel{
        width: 100%;
        height: 705px;
        float: left;
        background: #f0f;
    }
    #home{
        width: 100%;
        height: 705px;
        float: left;
        background: #ff0;
    }

</style>

<html>
    <head>
        <title>Cara Membuat Animasi Scroll - My Blog Share</title>
        <script type="text/javascript" src="js/jquery.min.js"></script>
        <script type="text/javascript">
            function artike() {
                $("html,body").animate({scrollTop:705}, 800);
            }
        </script>
    </head>
    <body>
        <div id="menu">
            <ul>
                <li id="home">Home</li>
                <li id="artikel" onClick="artike()">Artikel</li>
            </ul>
        </div>
        <div id="home">
            <p>Tampilan untuk header</p>
        </div>
        <div id="artikel">
            <p>Konten untuk artikel</p>
        </div>
    </body>
</html>