文档章节

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

Junn
 Junn
发布于 2013/01/16 19:05
字数 452
阅读 12888
收藏 4

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://flesler.blogspot.com/2007/10/jqueryscrollto.html

本文转载自:http://www.helloweba.com/view-blog-118.html

共有 人打赏支持
Junn
粉丝 145
博文 412
码字总数 288918
作品 0
海淀
高级程序员
分享一个超棒的jQuery的单页面滚动导航设计插件 - jQuery one page nav

日期:2012-4-21 来源:GBin1.com 在线演示1 在线演示2 本地下载 单 页面设计最近越来越流行了,使用单页面的网站简单优雅并且易于维护,你不需要修改很多文件来做日常维护,而且使用超酷的动...

gbin1
2012/04/24
0
0
jQuery 跟随浏览器窗口的回到顶部按钮

上周花了点时间改了一下 Go Top 按钮的显示效果, 显示在页面右侧, 跟随浏览器窗口滚动, 在 IE6 浏览器中使用淡入淡出的跟随显示. 可能现在已经存在很多类似的插件和工具, 但我还是想分享一下...

christina_12345
2014/03/17
0
0
Android 带你从源码的角度解析Scroller的滚动实现原理

转帖请注明本文出自xiaanming的博客(http://blog.csdn.net/xiaanming/article/details/17483273),请尊重他人的辛勤劳动成果,谢谢! 今天给大家讲解的是Scroller类的滚动实现原理,可能很...

程序袁_绪龙
2015/08/13
0
0
滚动到顶部-jquery.scrolltotop.js

使用教程: 直接粘贴下面的代码, 作为一个引入 配置参数: 初始化插件:

前端届的科比
2014/05/25
0
0
android 如何解决scrollTo无法执行

在Activity 的 onCreate() 方法(貌似在onStart和onResume也一样)中, 调用 mScrollView.scrollTo(0, 100); 是无效, 没有效果的. 找了半天, 终于在 http://stackoverflow.com/questions/32632...

西门好又多
2012/06/06
0
0

没有更多内容

加载失败,请刷新页面

加载更多

00.编译OpenJDK-8u40的整个过程

前言 历经2天的折腾总算把OpenJDK给编译成功了,要说为啥搞这个,还得从面试说起,最近出去面试经常被问到JVM的相关东西,总感觉自己以前学的太浅薄,所以回来就打算深入学习,目标把《深入理...

凌晨一点
今天
2
0
python: 一些关于元组的碎碎念

初始化元组的时候,尤其是元组里面只有一个元素的时候,会出现一些很蛋疼的情况: def checkContentAndType(obj): print(obj) print(type(obj))if __name__=="__main__": tu...

Oh_really
昨天
6
2
jvm crash分析工具

介绍一款非常好用的jvm crash分析工具,当jvm挂掉时,会产生hs_err_pid.log。里面记录了jvm当时的运行状态以及错误信息,但是内容量比较庞大,不好分析。所以我们要借助工具来帮我们。 Cras...

xpbob
昨天
116
0
Qt编写自定义控件属性设计器

以前做.NET开发中,.NET直接就集成了属性设计器,VS不愧是宇宙第一IDE,你能够想到的都给你封装好了,用起来不要太爽!因为项目需要自从全面转Qt开发已经6年有余,在工业控制领域,有一些应用...

飞扬青云
昨天
4
0
我为什么用GO语言来做区块链?

Go语言现在常常被用来做去中心化系统(decentralised system)。其他类型的公司也都把Go用在产品的核心模块中,并且它在网站开发中也占据了一席之地。 我们在决定做Karachain的时候,考量(b...

HiBlock
昨天
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部