<!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. 【工具】openwrt安装记录

    步骤: 1  从以太网引导启动.由于我们实验室在服务器上放了一个openwrt镜像,安装时先从以太网启动,将服务器上的镜像载入到RAM中启动系统. 2  用SCP将在PC上编译好的openwrt-XX ...

  2. 【BZOJ】【3301】【USACO2011 Feb】Cow Line

    康托展开 裸的康托展开&逆康托展开 康托展开就是一种特殊的hash,且是可逆的…… 康托展开计算的是有多少种排列的字典序比这个小,所以编号应该+1:逆运算同理(-1). 序列->序号:( ...

  3. 项目前端技术-learn

    赶鸭子上架 之 前端学习 目前项目中的前端用到的技术主要是:1. bootstrap框架; 2. 基于javscript的jQuery, jQuery ui; 3. dust前端模板引型.

  4. lua与 object-C 通信

    IOS中如何调用LUA,以及LUA如何调用IOS中的功能 下面将讲解一下如何在iOS里调用Lua函数,以及Lua函数如何调用iOS本地函数. 转载请注明出处.原文出处 http://www.cnblo ...

  5. Web Component 文章

    周末无意中了解了Web Component的概念. http://blog.amowu.com/2013/06/web-components.html http://www.v2ex.com/t/69 ...

  6. √新技能Get - 教你发空白朋友圈

    今天下午都被空白朋友圈刷屏了.空白朋友圈也即是在朋友圈里面发空消息,没有图片也没有文字,朋友圈动态是空空的.这是谁在恶搞呢?怎么实现呢? 怎么发空消息啊?其实这是为了帮助大家识别身边用iOS的小伙伴的 ...

  7. javascript实现数据结构：串--定长顺序存储表示以及kmp算法实现

    串(string)(或字符串)是由零个或多个字符组成的有限序列.串中字符的数目称为串的长度.零个字符的串称为空串(null string),它的长度为零. 串中任意个连续的字符组成的子序列称为该串的子 ...

  8. vi/vim使用指北 ---- Moving Around in a Hurry

    上一篇文章中,简单列出了一些基本的Vim操作,也列出了很多的光标移动命令,本章主要是有哪些命令可以更快的移动光标. vim的编辑操作,用得最多就是移动光标,对于很少行的文件来说,基本的命令就够用了,但 ...

  9. post 方式提交XML文件调用接口

    import java.io.BufferedReader; import java.io.InputStreamReader; import java.util.Date; import java. ...

  10. 关于c语言中的字符数组和字符串指针

    先看代码: #include <stdio.h> int main(void) { ] = "; char * strTmp = "abcdefg"; int ...