51CTO推薦專題：jQuery給力插件大閱兵

使用方法

ScrollTo：實(shí)現(xiàn)平滑滾動(dòng)到頁(yè)面指定位置演示地址：http://www.helloweba.com/demo/scrollto/

1、準(zhǔn)備jQuery庫(kù)和scrollTo.js插件。

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

2、XHTML

   
<ul class="nav">   
   <li><a href="#" class="nav_pro">產(chǎn)品展示</a></li>   
   <li><a href="#" class="nav_news">新聞中心</a></li>   
   <li><a href="#" class="nav_ser">服務(wù)支持</a></li>   
   <li><a href="#" class="nav_con">聯(lián)系我們</a></li>   
   <li><a href="#" class="nav_job">人才招聘</a></li>   
</ul>   
<div id="pro" class="box">   
   <h3>產(chǎn)品展示</h3>   
</div>   
<div id="news" class="box">   
   <h3>新聞中心</h3>   
</div>   
<div id="ser" class="box">   
   <h3>服務(wù)支持</h3>   
</div>   
<div id="con" class="box">   
   <h3>聯(lián)系我們</h3>   
</div>   
<div id="job" class="box">   
   <h3>人才招聘</h3>   
</div>  

我們用一個(gè)頁(yè)面展示導(dǎo)航和導(dǎo)航對(duì)應(yīng)的每個(gè)模塊。

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

當(dāng)點(diǎn)擊導(dǎo)航按鈕時(shí)，觸發(fā)scrollTo方法，$.scrollTo帶有兩個(gè)參數(shù)，第一個(gè)是指定要滾動(dòng)的目的ID，第二個(gè)參數(shù)是滾動(dòng)時(shí)間間隔，以毫秒為單位。在本例中，只應(yīng)用了scrollTo的基本方法。其實(shí)scrollTo還可以指定橫向縱向滾動(dòng)，傳沖效果等，具體可以參照官方網(wǎng)站的例子：http://demos.flesler.com/jquery/scrollTo/

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

【編輯推薦】

1. 3月份8個(gè)jQuery最佳插件推薦
2. 25個(gè)超棒的jQuery日歷和日期選取插件
3. 分享10個(gè)超炫的jQuery網(wǎng)站
4. 18個(gè)最新最給力的jQuery教程分享
5. jQuery實(shí)現(xiàn)表格數(shù)據(jù)的動(dòng)態(tài)添加與統(tǒng)計(jì)