<script type="text/javascript" src="js/jquery.js"></script>

<script type="text/javascript" src="js/jquery.scrollTo.js"></script> 

<ul class="nav">

<li><a href="#" class="nav_pro">产品展示</a></li>

<li><a href="#" class="nav_news">新闻中心</a></li>

<li><a href="#" class="nav_ser">服务支持</a></li>

<li><a href="#" class="nav_con">联系我们</a></li>

<li><a href="#" class="nav_job">人才招聘</a></li>

</ul> 

.nav{width:500px;margin:20px auto;}

.nav li{float:left; width:100px; height:24px; line-height:24px}

.box{height:500px}

.box h3{height:32px; line-height:32px; padding-left:20px; font-size:14px}

#pro,#ser{background:url(img/bg.jpg)}

#news,#con{background:url(img/bg2.gif)}

$(function(){

    $(".nav_pro").click(function(){

        $.scrollTo('#pro',500);

    });

    $(".nav_news").click(function(){

        $.scrollTo('#news',800);

    });

    $(".nav_ser").click(function(){

        $.scrollTo('#ser',1000);

    });

    $(".nav_con").click(function(){

        $.scrollTo('#con',1200);

    });

    $(".nav_job").click(function(){

        $.scrollTo('#job',1500);

    });

});