您的位置: 首页 > 源码资料

ScrollTo:平滑滚动到页面指定位置

源码资料 时间:2014-02-19 作者/发布人:科杰在线 点击:4297

  ScrollTo是一款基于jQuery的滚动插件,当点击页面的链接时,可以平滑地滚动到页面指定的位置,而不是像原来那种锚点形式,点击直接跳到指定地点。适用在一些页面内容比较多,页面长度有好几屏的场合。

  当点击导航按钮时,触发scrollTo方法,$.scrollTo带有两个参数,第一个是指定要滚动的目的ID,第二个参数是滚动时间间隔,以毫秒为单位。在本例中,只应用了scrollTo的基本方法。其实scrollTo还可以指定横向纵向滚动,缓冲效果等。

  具体可以参照官方网站的例子:http://demos.flesler.com/jquery/scrollTo/

使用方法
1、准备jQuery库和scrollTo.js插件 (点此下载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:平滑滚动到页面指定位置 :: 科杰在线pc354.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">产品展示</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 style="clear:both"></div>
<div id="home" class="box">
   <h3>首页</h3>
</div>
<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>
</body>
</html>

++++++++++++++++代码结束++++++++++++++

来源于www.helloweba.com/view-blog-118.html


科杰在线pc354.com 收集整理 转载请注明出处 2014.2.19

--------------------------全文完----------------------------
0% (0)
0% (0)
整站字母快速检索: A B C D E F G H I J K L M N O P Q R S T U V W X Y Z 1 2 3 4 5 6 7 8 9 0

综合报道 经济形势 劳动就业 政策法规 热点推荐 创业新闻 创业指导 创业课堂 创业故事 大学生创业 | 装修日记 | 学驾驶经历 | 免费信息发布 | 网站地图

地址:合肥市临泉路香格里拉花园 邮箱:pc354@163.com QQ:55769640 | 皖ICP备06007228号 
版权所有:科杰服务(www.pc354.com) 建议使用IE7.0或以上版本,最少1280分辨率浏览本站,可获得最佳浏览效果

飞到顶部