JQuery插件：ScrollTo腻滑滚动到页面指定位置

2024年3月23日 168次阅读 来源: hover_lew

ScrollTo是一款基于jQuery的转动插件，当点击页面的链接时，能够腻滑地转动到页面指定的位置。适用在一些页面内容比较多，页面长度有好几屏的场所，本文以DEMO为示例解说该插件的运用。检察演示DEMO

运用要领

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/

原文地点：http://www.helloweba.com/view-blog-118.html

    原文作者：hover_lew
    原文地址: https://segmentfault.com/a/1190000006007247
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞