JQuery插件:ScrollTo平滑滾動到頁面指定位置
阿新 • • 發佈:2019-04-11
img code jpg new nav box eight scroll on()
1、準備jQuery庫和scrollTo.js插件。
<script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery.scrollTo.js"></script>
2、HTML
<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>
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,第二個參數是滾動時間間隔,以毫秒為單 位。
JQuery插件:ScrollTo平滑滾動到頁面指定位置