<!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. Oracle窗口函数显示想要的行数

    Oracle中支持窗口函数ROW_NUMBER(),其用法和 MSSQLServer2005中相同,比如我们 执行下面的 SQL语句: SELECT * FROM ( SELECT ROW_NUMBE ...

  2. 深入分析windows下配置wamp环境各模块的版本兼容性

    版本相关概念说明: ts/nts: thread safety 线程安全 TS refers to multithread capable builds. NTS refers to single t ...

  3. hdu 1285 确定比赛名次 拓扑排序

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1285 有N个比赛队(1<=N<=500),编号依次为1,2,3,....,N进行比赛,比赛 ...

  4. Kali Linux 命令集

    系统信息 arch 显示机器的处理器架构(1) uname -m 显示机器的处理器架构(2) uname -r 显示正在使用的内核版本 dmidecode -q 显示硬件系统部件 - (SMBIOS ...

  5. IOS Crash捕获

    IOS Crash ,就两种情况:一种是异常,另一种是中断［信号量］. #include <libkern/OSAtomic.h> #include <execinfo.h> ...

  6. 解决vsftpd日志时间问题

    解决vsftpd日志时间问题 发布时间:August 29, 2008 分类:Linux <你必须承认土也是一种艺术> <Linux下查看Apache的请求数> 最近发现vsf ...

  7. 白话CSS3的新特性

    声明:这篇文章不是手册,所以不会说的很详细,只是告诉初学者CSS3显著的改进有啥,高手老手绕行. 一.在边框上的改进 1.可以给方框加圆角了,值越大越圆,解决了过去大方框的不美观 2.可以给控件加阴影 ...

  8. POJ 1401

    #include<iostream>using namespace std;int main(){    int num;    int i;    int sum;    cin> ...

  9. ExtJs之addManagedListener

    <!DOCTYPE html> <html> <head> <title>ExtJs</title> <meta http-equiv ...

  10. Xamarin for Visual Studio 3.11.666 Beta版 破解补丁

    注意:本版本是 Beta 版   现已推送到稳定频道 前提概要 全新安装请参考 安装 Xamarin for Visual Studio. 最新稳定版请参考 Xamarin for Visual St ...