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

使用方法

1－準備jQuery庫和scrollTo.js插件。

2－XHTML

• 產品展示
• 新聞中心
• 服務支持
• 聯系我們
• 人才招聘

產品展示

新聞中心

服務支持

聯系我們

人才招聘

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

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/

總結

以上是生活随笔為你收集整理的php滚动到指定位置,JQuery插件：ScrollTo平滑滚动到页面指定位置的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。