<!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>

    <title>Untitled Page</title>

    <script type="text/javascript" src=jquery-1.8.0.js></script>

    <script>

        $(document).ready(function () {

            //当点击顶部按钮的时候，执行方法,scrollTop属性获取选中标签距滚动条的距离。

            $('#top').click(function () {

                $('html').animate(

                { scrollTop: '0px' }, 1000

                );

            });

            //当点击底部标签时候，执行方法，其中offset()获取匹配元素在当前视口的相对偏移,返回的是一个对象，有两个属性top,left

            //animate,的第二个属性当然我们也可以设置'slow','normal'或'fast'

            $('#foot').click(function () {

                $('html').animate(

                  {scrollTop:$('span').offset().top},1000

                );

            });

        });

    </script>

</head>

<body>

  <br /> <br /> <br /> <br /> <br />

  <a href="#" id="foot">底部</a>

  <br /> <br /> <br /> <br /> <br />

  <br /> <br /> <br /> <br /> <br />

<a href="#" id="top">顶部</a>

  <br /> <br /> <br /> <br /> <br />

  <span></span>

</body>

</html>

最简单的用jquery实现动画的跳到顶部和底部的更多相关文章

  1. Jquery判断滚动条是否到达窗口顶部和底部

    <script type="text/javascript"> $(document).ready(function(){     alert($(window).he ...

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

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

  3. jQuery的动画处理总结

    最近一年多一直在做前端的东西,由于老板在追求一些年轻动感的效果,让页面元素不能仅仅是简单的隐藏显示,所以经常会使用一些动画效果,发现jQuery的动画真心好用啊,把常用的几个总结一下,希望不再每次使用 ...

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

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

  5. jQuery 停止动画、jQuery Callback 函数、jQuery - Chaining

    一.jQuery 停止动画 jQuery stop() 方法用于在动画或效果完成前对它们进行停止. stop() 方法适用于所有 jQuery 效果函数,包括滑动.淡入淡出和自定义动画. $(sele ...

  6. 放弃使用jQuery实现动画

    在Web开发的圈子里,开发人员经常觉得CSS动画是一种高性能web动画技术.假设想让网页载入的更快一些,就应该用纯CSS动画.事实上这样的观点是错误的,非常多开发人员早就放弃了javascript的动 ...

  7. jQuery Easing 动画效果扩展

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

  8. jQuery系列 第五章 jQuery框架动画特效

    第五章 jQuery框架动画特效 5.1 jQuery动画特效说明 jQuery框架中为我们封装了众多的动画和特效方法,只需要调用对应的动画方法传递合适的参数,就能够方便的实现一些炫酷的效果,而且jQ ...

  9. 05-老马jQuery教程-动画

    前言 jQuery的动画系统做的非常出色,而且把最常用的显示.隐藏.淡入淡出.滑动显示和折叠凳效果都做了很好的封装.跟jQuery的选择器和事件配合起来,可以实现很多很绚的效果,而且简单易用兼容性好. ...

随机推荐

  1. 【BZOJ】【1912】【APIO2010】patrol巡逻

    树形DP 说是树形DP,其实就是求树的最长链嘛…… K=1的时候明显是将树的最长链的两端连起来最优. 但是K=2的时候怎么搞? 考虑第一次找完树的最长链以后的影响:第一次找过的边如果第二次再走,对答案 ...

  2. ATT GATT Profile

    Bluetooth: ATT and GATT Bluetooth 4.0, which includes the Low Energy specification, brings two new c ...

  3. CodeForces 321A

    A. Ciel and Robot time limit per test 1 second memory limit per test 256 megabytes input standard in ...

  4. javascript (js)中的基本概念

    1. 基本数据类型 1.1 number (数字)在js中没有整形和浮点型的区分,所有的数字都是浮点型标识, 采用64位的浮点格式来表示数字.如果数字类型用在字符串连接表达式中,则会自动转换成字符串, ...

  5. Access数据库和SQL Server数据库在实际应用中的区别

    1.在Access数据库中简历查询语句的步骤 --> 打开你的MDB --> 在数据库窗口中,点击“查询”,或在“视图”菜单中选择“数据库对象”-> “查询” --> 点击数据 ...

  6. 解决Notice错误，性能竟然提升了1000多倍！

    先说PHP的deprecated错误的性能问题 最近刚刚完成了一个项目,在测试完基本功能后,我们就发布到线上.结果上线不久就发现产生了大量的错误,如下图: 一看都是PHP的Deprecated错误,是 ...

  7. POJ 2674

    Linear world Time Limit: 3000MS   Memory Limit: 65536K Total Submissions: 2448   Accepted: 564 Descr ...

  8. YAPF：Google开源的Python代码格式化工具

    点这里 现在的大多数 Python 代码格式化工具(比如:autopep8 和 pep8ify)是可以移除代码中的 lint 错误.这显然有些局限性.比如:遵循 PEP 8 指导的代码可能就不会被格式 ...

  9. isMobile 一个简单的JS库，用来检测移动设备

    点这里 github地址:https://github.com/kaimallea/isMobile Example Usage I include the minified version of t ...

  10. Eclipse下Python的MySQLdb的安装以及相关问题

    前提是要安装好Python以及eclipse和MySQL的相应版本.本文Python为2.7,MySQL为5.1Eclipse为3.6.2 下载完MySQLdb以后,直接安装即可.在eclipse中启 ...