ScrollTo是一款基于jQuery的滾動插件，當點擊頁面的鏈接時(shí)，可(kě)以平滑地滾動到頁面指定的位置。适用在一些(xiē)頁面內(nèi)容比較多(duō)，頁面長度有(yǒu)好幾屏的場(chǎng)合，本文以DEMO為(wèi)示例講解該插件的應用。

使用方法

1、準備jQuery庫和(hé)scrollTo.js插件。

2、XHTML

	
	

		産品展示
	

	

		新聞中心
	

	

		服務支持
	

	

		聯系我們
	

	

		人(rén)才招聘
	




	
	

		産品展示
	




	
	

		新聞中心
	




	
	

		服務支持
	




	
	

		聯系我們
	




	
	

		人(rén)才招聘
	

我們用一個(gè)頁面展示導航和(hé)導航對應的每個(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);
	});
});

當點擊導航按鈕時(shí)，觸發scrollTo方法，$.scrollTo帶有(yǒu)兩個(gè)參數(shù)，第一個(gè)是指定要滾動的目的ID，第二個(gè)參數(shù)是滾動時(shí)間(jiān)間(jiān)隔，以毫秒(miǎo)為(wèi)單位。在本例中，隻應用了scrollTo的基本方法。其實scrollTo還(hái)可(kě)以指定橫向縱向滾動，傳沖效果等，具體(tǐ)可(kě)以參照官方網站(zhàn)的例子