ScrollTo:實現平滑滾動到頁面指定位置
ScrollTo是一款基於jQuery的滾動插件,當點擊頁面的鏈接時,可以平滑地滾動到頁面指定的位置。適用在一些頁面內容比較多,頁面長度有好幾屏的場合,本文以DEMO爲示例講解該插件的應用。
使用方法
ScrollTo:實現平滑滾動到頁面指定位置演示地址:http://www.helloweba.com/demo/scrollto/
1、準備jQuery庫和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">產品展示</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>
我們用一個頁面展示導航和導航對應的每個模塊。
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/