"text/javascript" src="js/jquery.js">   
"text/javascript" src="js/jquery.scrollTo.js">  

   
class="nav">   
   
"#" class="nav_pro">产品展示
   
   
"#" class="nav_news">新闻中心
   
   
"#" class="nav_ser">服务支持
   
   
"#" class="nav_con">联系我们
   
   
"#" class="nav_job">人才招聘
   
   
"pro" class="box">   
   
产品展示
   

我们用一个页面展示导航和导航对应的每个模块。

3、CSS

.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)}  

4、使用scrollTo.js插件

$(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);   
    });   
});  

当点击导航按钮时，触发scrollTo方法，$.scrollTo带有两个参数，第一个是指定要滚动的目的ID，第二个参数是滚动时间间隔，以毫秒为单位。在本例中，只应用了scrollTo的基本方法。其实scrollTo还可以指定横向纵向滚动，传冲效果等，具体可以参照官方网站的例子：http://demos.flesler.com/jquery/scrollTo/

原文链接：http://www.helloweba.com/view-blog-118.html

【编辑推荐】

1. 3月份8个jQuery最佳插件推荐
2. 25个超棒的jQuery日历和日期选取插件
3. 分享10个超炫的jQuery网站
4. 18个最新最给力的jQuery教程分享
5. jQuery实现表格数据的动态添加与统计