最简单的用jquery实现动画的跳到顶部和底部

<!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>
时间: 2024-10-13 22:29:40

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

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

<script type="text/javascript"> $(document).ready(function(){     alert($(window).height()); //浏览器时下窗口可视区域高度     alert($(document).height()); //浏览器时下窗口文档的高度     alert($(document.body).height());//浏览器时下窗口文档body的高度     alert($(document.body)

Javascript学习------top/left简单动画,效果与jquery的动画差不多

在网上查看jquery的动画帧率为13毫秒 我用下面的小例子验证了一下: 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>top/left简单动画</title> 5 <style type="text/css"> 6 * { margin: 0px; padding: 0px; } 7 </style> 8 <script src="http:

jquery的动画效果

序言:昨天复习了jQuery的一些事件,今天我打算继续来复习jQuery的动画效果. 用于写一些网页特效:渐变菜单,渐变显示,图片轮播等. 首先当然得引入插件:<script src="jquery/jquery-1.11.1.js"></script> 1.简单的HTML代码 <input type="button" value="show" id="btn1"/><input ty

放弃使用jQuery实现动画

在Web开发的圈子里,开发者常常认为CSS动画是一种高性能web动画技术,如果想让网页加载的更快一些,就应该用纯CSS动画.其实这种观点是错误的,很多开发者早就放弃了javascript的动画,迫使自己使用复杂的CSS样式来实现相同效果的UI交互.他们完全忽视了javascript带来的更好的交互性. 但事实是基于javascript的动画效果通常和基于css的动画一样快,有些甚至更快一些.CSS动画通常被觉得比较快,因为我们总是拿它和jQuery动画相比,其实慢的是jQuery的$.anima

基于animate.css的jQuery文字动画插件

Morphext是一款简单.高性能和跨浏览器的jQuery文字动画插件.该文字动画jQuery插件基于Animate.css.你可以设置使用多个不同的句子,Morphext会以你指定的CSS3动画方式轮流显示它们. Morphext所做的事情是隐藏前一个文本短句,然后使用下一个来替换它.插件中已经为跨浏览器处理好了所有浏览器厂商的前缀问题,它可以为我们提供非常酷的文字动画效果. Animate.css依赖于CSS3 animations和transformations.如果浏览器不支持css3,

jquery的动画方法

1.)show()和hide(),会显示和隐藏DOM元素.但是,只要传递一个时间参数进去,就变成了动画,从左上角逐渐展开或收缩的: div.hide(3000); // 在3秒钟内逐渐消失 toggle()方法则根据当前状态决定是show()还是hide() 2.)slideUp()和slideDown()是在垂直方向逐渐展开或收缩的.slideToggle()则根据元素是否可见来决定下一步动作: div.slideUp(3000); // 在3秒钟内逐渐向上消失 3.)fadeIn()和fad

jQuery之动画效果show()......animate()

jQuery之动画效果 1.show()显示效果 语法:show(speed,callback) Number/String,Function speend为动画执行时间,单位为毫秒.也可以为slow","normal","fast" callback可选,为当动画完成时执行的函数.   show(speed,[easing],callback) Number/String easing默认是swing,可选linear; $("#div1&qu

jQuery自定义动画

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>jQuery自定义动画</title> <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> <script

如何防止jQuery对象动画重复执行

如何防止jQuery对象动画重复执行:很多朋友可能会遇到这样的时候,如果有一个mouseover事件触发的动画效果,如果鼠标连续移入的话,可能会导致动画被多次执行,这种情况很可能是我们不想要的下过,下面就介绍一下如何防止此种现象的发生.代码如下: if(!$(".content").is(":animated")){ //code } 上面的代码就是判断指定元素是否处于动画之中,如果没有处于动画之中,则执行响应操作.相关阅读:1.is()函数可以参阅jQuery的i