JQuery插件：ScrollTo平滑滾動到頁面指定位置

ScrollTo是一款基於jQuery的滾動插件，當點擊頁面的連接時，能夠平滑地滾動到頁面指定的位置。適用在一些頁面內容比較多，頁面長度有好幾屏的場合，本文以DEMO爲示例講解該插件的應用。查看演示DEMO

使用方法

一、準備jQuery庫和scrollTo.js插件。

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

二、XHTML

<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> 
<div id="pro" class="box"> 
   <h3>產品展現</h3> 
</div> 
<div id="news" class="box"> 
   <h3>新聞中心</h3> 
</div> 
<div id="ser" class="box"> 
   <h3>服務支持</h3> 
</div> 
<div id="con" class="box"> 
   <h3>聯繫咱們</h3> 
</div> 
<div id="job" class="box"> 
   <h3>人才招聘</h3> 
</div>

咱們用一個頁面展現導航和導航對應的每一個模塊。

三、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)}

四、使用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://flesler.blogspot.com/2007/10/jqueryscrollto.html