动画的思路很简单，点击页面上一个元素，页面滚动到指定位置。下面介绍一下我3个小时百度的研究成果：

首先是html部分：

<html>

<body>

<a>顶部</a>
<a>中部</a>

...<p>持续添加直到出现滚动条</p>...
</body>
</html>

先添加两个<a>元素作为按钮。然后对<a>元素进行补充：

<html>

<body>

<a href="javascript:;" id="tab1">顶部</a>

<a href="javascript:;" id="tab2">中部</a>

...<p>持续添加直到出现滚动条</p>...

</body>

</html>
href="javascript:;"大概意思是说a元素可以激活js代码。如果不加则代码无效。使用<button>则无需添加。

接着引入jquery和写入代码：

<script src="js/jquery-1.10.2.min.js"></script>

<script>

    $(document).ready(function(){

        $("#tab1").click(function(){

            $("html,body").animate({scrollTop:'0px'},300);

        });

        $("#tab2").click(function(){

            $("html,body").animate({scrollTop:'600px'},300);

        });

    });

</script>

需要注意:

1、写入的代码最好在引入的jquery语句下方

2、id一定要和<a>元素对应

3、"html,body"代表整体移动

4、({scrollTop:'600px'},300);前面的数值是移动距离，后面的数值是动画时间（单位是毫秒）

做到这一步代码就能运行了。

下面详细的解析一下jquery代码：

 $(document).ready(function(){

//这一句都要加，不加会出错，没有实际作用

        $("#tab1").click(function(){

        //$("#tab1")是选择器，click()是方法。意思是说对#tab1使用click方法

            $("html,body").animate({scrollTop:'0px'},300);

            //我理解的scrollTop是个变量属性，代表元素最顶端和当前浏览器显示区域上边沿之间的距离，所以这句话的意思是：让body的上边沿和浏览器可视区域上边沿距离为0px，结果就是回到页面顶端。

        });

        ...

    });

jQuery 滚动动画简单版的更多相关文章

  1. jquery列队动画简单演示

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. Jquery实现图片瀑布流思路-简单版

    目录 Jquery实现图片瀑布流思路-简单版 1.预备 2.开始 1.声明 2.主体 3.窗体大小改变事件 Jquery实现图片瀑布流思路-简单版 注意:本篇文章基于知道每张图片的实际尺寸的情况下 特 ...

  3. HTML5/jQuery雷达动画图表 图表配置十分简单

    1.HTML5/jQuery雷达动画图表 图表配置十分简单 之前我们介绍过不少形形色色的HTML5图表了,像这款HTML5折线图表Aristochart是一款很不错的折线图表,这款HTML5 Canv ...

  4. 推荐几款制作网页滚动动画的 JavaScript 库

    这里集合了几款很棒的制作网页滚动动画的 JavaScript 库和插件.它们中,有的可以帮助你在页面滚动的时候添加动感的元素动画,有的则是实现目前非常流行的全屏页面切换动画.相信借助这些插件,你也可以 ...

  5. ScrollMe – 在网页中加入各种滚动动画效果

    ScrollMe 是一款 jQuery 插件,用于给网页添加简单的滚动效果.当你向下滚动页面的时候,ScrollMe 可以缩放,旋转和平移页面上的元素.它易于设置,不需要任何自定义的 JavaScri ...

  6. jQuery Easing动画效果扩展（转）

    jQuery API提供了简单的动画效果如淡入淡出以及自定义动画效果,而今天我给大家分享的是一款jQuery动画效果扩展增强插件jquery.easing.js,使用该插件可以实现直线匀速运功.变加速 ...

  7. jQuery Easing 动画效果扩展

    jQuery API提供了简单的动画效果如淡入淡出以及自定义动画效果,而今天我给大家分享的是一款jQuery动画效果扩展增强插件jquery.easing.js,使用该插件可以实现直线匀速运功.变加速 ...

  8. jQuery Easing 动画效果扩展--使用Easing插件，让你的动画更具美感。

    jQuery  Easing 是一款比较老的jQuery插件,在很多网站都有应用,尤其是在一些页面滚动.幻灯片切换等场景应用比较多.它非常小巧,且有多种动画方案供选择,使用简单,而且免费. 引入Eas ...

  9. jquery animate 动画效果使用解析

    animate的意思是:使有生气:驱动:使栩栩如生地动作:赋予…以生命作为形容词:有生命的:活的:有生气的:生气勃勃的 先看动画效果:http://keleyi.com/keleyi/phtml/jq ...

随机推荐

  1. 2016-11-15NOIP模拟赛

    AM学军OJ T1 暴力 #include<bits/stdc++.h> using namespace std; typedef long long LL; + ; int len, p ...

  2. spring tranaction 事务入门

    一.事务四个属性 原子性(atomicity).一个事务是一个不可分割的工作单位,事务中包括的诸操作要么都做,要么都不做. 一致性(consistency).事务必须是使数据库从一个一致性状态变到另一 ...

  3. android webview内容压线问题解决方法

    最近在使用webview做页面开发,项目上要求webview在获取到焦点的时候需要有边框线,于是添加上了webview的选中效果,但是出现了网页中的内容压选中框的情况.之后给webview添加padd ...

  4. RHCA学习笔记:RH442-Unit9内核定时与进程延时

      Unit 9 Kernel Timing and Process Latency 内核定时与进程延时 学习目标: A.了解CPU 是怎样追踪时间的 B.调整CPU的访问次数 C.调整调度延时 D. ...

  5. android 沉浸通知栏

    IOS的沉浸式通知栏很高大上,通知栏和app统一颜色或样式,很美观.android上面也早就人实现这种效果了. 我在这边也写一个实现通知栏沉浸式的方法,目前只实现了相同颜色. 先要改布局文件xml & ...

  6. 【转】CCUserDefault类深入分析——2013-08-25 22

    http://game.dapps.net/gamedev/game-engine/8792.html 另:本章所用Cocos2d-x版本为: 2.1.1 (2013-01-28) 大家好,今天我们来 ...

  7. 详解ExplosionField的使用，实现View的粉碎效果

    小米平板卸载软件的时候,会有一个粉碎的效果,看起来很拉风,GitHub上有一个开源控件可以实现这个效果,我们一起来看看.先来看看效果图: 看起来不错吧,那我们今天就来详细说说ExplosionFiel ...

  8. 如何运用管理员身份运行cmd窗口？

    所有程序 → 附件 → 命令行提示符 → 鼠标右键“以管理员身份运行”.

  9. 记录一次centos升级gblic的教训

    前些天公司项目需要对上传的图片打水印,前端采用angularjs,后端nodejs,网上一搜,找到了一个images的库,在本地Windows环境下试了下还不错,然后就上传测试服务器(centos6. ...

  10. pthread

    pthread是UNIX操作系统中创建和控制线程的一系列API,通过了解这些API,可以更加清晰的理解线程究竟是什么. 调用pthread的API首先要包含<pthread.h>这一头文件 ...