<!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. 02.Hibernate映射基础

    前言:Hibernate的核心功能是根据数据库到实体类的映射,自动从数据库绑定数据到实体类.使我们操作实体类(Java对象)就能对数据库进行增.删.查.改,而不用调用JDBC API使数据操作变得简单 ...

  2. Word2007插入两种页码

    做毕设,摘要,Abstract,目录,第一章,现在想要“摘要,Abstract,目录”编页码“为罗马数字,第一章开始为阿拉伯数字,可以按如下步骤: 1.各部分插入分页符,这与插入两种页码无关,不过是为 ...

  3. Hibernate中查询数据转成VO对象及注意问题

    大家都可能会遇到,在用json传输数据时,很多字段是来自不同的表数据,需要我们进行封装数据. hibernate提供这么一个方法用来直接封装查询属性: query.setResultTransform ...

  4. Linux --windows vs

    我其实并不是很清楚我在做什么....希望做完之后可以解答....... 在看了一堆GNU, Clang, GCC, QT, MinGW, CygWin, POSIX 这些概念之后,我觉得我在做的事情就 ...

  5. 用boost共享内存实现进程通信的例子

    发送端 #include "DBProc1.h" #include <string> #include <thread> #include <boos ...

  6. sqlserver 查询库中有多少张表

    表数目:select count(1) from sysobjects where xtype='U' 视图数::select count(1) from sysobjects where xtype ...

  7. Asp.net页面无刷新请求实现

    Asp.net页面无刷新请求实现 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind=&qu ...

  8. [HTML/CSS]display:none和visibility:hidden的区别

    写在前面 在群里有朋友问这样一个问题,display:none的标签,影响了布局.这就引出了本篇这样的问题,印象中display:none的块元素是不占位置的. 一个例子 <!DOCTYPE h ...

  9. ASP.NET 应用程序安全

    原文:http://msdn.microsoft.com/zh-cn/magazine/hh708755.aspx 一.跨站点脚本 简介 XSS 攻击是指将脚本恶意注入用户的浏览会话,这通常在用户不知 ...

  10. php调试工具firephp

    PHP调试有很多中方法.今天给大家推荐的是 FirePHP 这个工具,是基于firefox的一个组件.Firephp组件安装地址.使用之前需要先安装下这个组件.完了还需要down一个FirePHP的包 ...