您的位置: 首頁 > 源碼資料
ScrollTo：平滑滾動(dòng)到頁面指定位置
源碼資料 時(shí)間:2014-02-19 作者/發(fā)布人:科杰在線 點(diǎn)擊:4505
ScrollTo是一款基于jQuery的滾動(dòng)插件，當(dāng)點(diǎn)擊頁面的鏈接時(shí)，可以平滑地滾動(dòng)到頁面指定的位置，而不是像原來那種錨點(diǎn)形式，點(diǎn)擊直接跳到指定地點(diǎn)。適用在一些頁面內(nèi)容比較多，頁面長度有好幾屏的場合。
當(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/
使用方法
1、準(zhǔn)備jQuery庫和scrollTo.js插件 (點(diǎn)此下載http://yunpan.cn/QphJcYUbX69cd）
2、將下面代碼存為html文件，并將壓縮包中的JS文件夾放置在該html同目錄中即可。
更多美化工作就靠自己啦！！
+++++++++++代碼部分+++++++++++++
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>ScrollTo：平滑滾動(dòng)到頁面指定位置 :: 科杰在線www.yeewaa.com</title>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.scrollTo.js"></script>
<script type="text/javascript">
$(function(){
$(".nav_home").click(function(){
$.scrollTo('#home',300);
});
$(".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);
});
});
</script>
<style type="text/css">
.nav{width:700px;margin:10px 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:#FCF}
#home,#news,#con{background:#efefef}
.clear{clear:both}
</style>
</head>
<body>
<ul class="nav">
<li><a href="#" class="nav_home">首頁</a></li>
<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 style="clear:both"></div>
<div id="home" class="box">
<h3>首頁</h3>
</div>
<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>
</body>
</html>
++++++++++++++++代碼結(jié)束++++++++++++++
來源于www.helloweba.com/view-blog-118.html
科杰在線www.yeewaa.com 收集整理 轉(zhuǎn)載請(qǐng)注明出處 2014.2.19
生活常識(shí)
- 騷年，年底大掃除如何清理最霸道的廚房油污你..(12-22)
- 吃了幾十年火鍋，竟然才發(fā)現(xiàn)吃錯(cuò)了(12-17)
- 安徽職工生育保險(xiǎn)津貼如何領(lǐng)取？流產(chǎn)津貼如何..(12-05)
- 十萬個(gè)為什么？女性私處為什么會(huì)變黑(11-19)
- 人體內(nèi)全部秘密，再不對(duì)自己好點(diǎn)就晚了(11-16)
創(chuàng)意無限
- 英國“神奇凝膠”緩解“皮肉之苦”(08-03)
- 德攝影師制作奇妙光涂鴉頗似壯觀煙花(組圖)(05-10)
- 英國女學(xué)生用立體涂鴉畫出“隱形車”(圖)(05-10)
- 創(chuàng)意到實(shí)用！國外知名地鐵站設(shè)計(jì)欣賞(04-13)
- 工業(yè)革命時(shí)代的粗曠！起重機(jī)造型吊燈(04-13)
源碼資料
資源中心
- 原文：為什么這么多人黑周星馳(全文)(09-12)
- 紅藍(lán)3D眼鏡測試演示3D圖片-風(fēng)景、人物及其他2..(02-06)
- 紅藍(lán)3D眼鏡測試演示3D圖片及美女3D視頻-美女篇..(02-06)
- “東亞病夫”是中國人自已罵自已的,非洋人(08-06)
- eWebEditor不支持IE8、IE7、火狐、傲游的解決..(06-13)
