<!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. HDU 5792 World is Exploding 树状数组+枚举

    题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=5792 World is Exploding Time Limit: 2000/1000 MS (Ja ...

  2. openstack与VMware workStation的区别

    免责声明:     本文中使用的部分图片来自于网络,如有侵权,请联系博主进行删除 最近一直在研究云计算,恰好有个同事问了我一个问题:你们研究的openstack到底是什么东西?跟VMware Work ...

  3. 各大公司广泛使用的在线学习算法FTRL详解

    各大公司广泛使用的在线学习算法FTRL详解 现在做在线学习和CTR常常会用到逻辑回归( Logistic Regression),而传统的批量(batch)算法无法有效地处理超大规模的数据集和在线数据 ...

  4. JAVA数据结构系列 栈

    java数据结构系列之栈 手写栈 1.利用链表做出栈,因为栈的特殊,插入删除操作都是在栈顶进行,链表不用担心栈的长度,所以链表再合适不过了,非常好用,不过它在插入和删除元素的时候,速度比数组栈慢,因为 ...

  5. Nodejs Express 4.X 中文API 1--- Application篇

    相关阅读: Express 4.X API 翻译[一] --  Application篇 Express4.XApi 翻译[二] --  Request篇 Express4.XApi 翻译[三] -- ...

  6. BZOJ 1071组队

    题目链接:http://www.lydsy.com/JudgeOnline/problem.php?id=1071 题目很好,居然写了很久,题解找了真多: 主要两种做法: O(n^2lgn),通过优先 ...

  7. win7修改hosts文件方法

    因权限的关系,导致无法修改,解决如下: hosts属性 --> 安全 --> 编辑权限 --> 完全控制,就可以修改该文件了.win7默认不能修改hosts文件.

  8. HDU 4027 Can you answer these queries?(线段树，区间更新，区间查询)

    题目 线段树 简单题意: 区间(单点?)更新,区间求和  更新是区间内的数开根号并向下取整 这道题不用延迟操作 //注意: //1:查询时的区间端点可能前面的比后面的大: //2:优化:因为每次更新都 ...

  9. POJ 2010

    Moo University - Financial Aid Time Limit: 1000MS   Memory Limit: 30000K Total Submissions: 4235   A ...

  10. sql 语句的各种连接

    数据表: 1.两种连接表现方式一样 其中 where 条件语句可以省略,当时join 的on 语句不可省略 2.左连接,右连接 左连接:返回左表的所有数据,并根据条件返回左右表的连接结果,如果未匹配到 ...