<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>scrollTop与offset.top、animate</title>

    <style>

        * {

            margin: 0;

            padding: 0

        }

        body {

            margin: 0 auto;

            max-width: 640px;

            background-color: #fbfbfb;

            padding: 10px;

        }

        .bd {

            height: 1650px;

            overflow: hidden;

        }

        .btn_animate {

            position: absolute;

            width: 120px;

            height: 30px;

            line-height: 30px;

            background-color: rgb(129, 26, 26);

            color: #fff;

            text-align: center;

        }

        .btn_ho {

            position: absolute;

            top: 40px;

            left: 0;

            width: 120px;

            height: 30px;

            line-height: 30px;

            background-color: rebeccapurple;

            border-radius: 5px;

            color: #fff;

            text-align: center;

            margin: 10px 0;

        }

        .btn_go {

            position: absolute;

            left: 0;

            top: 90px;

            height: 30px;

            line-height: 30px;

            width: 150px;

            background-color: plum;

            border-radius: 5px;

            text-align: center;

        }

        .hide {

            position: absolute;

            top: 160px;

            left: 0;

            display: none;

            width: 100px;

            height: 30px;

            background-color: orange;

        }

        .btn_top{ overflow: hidden; height: 30px;line-height: 30px; width: 130px; text-align: center; background-color: navy; border-radius: 5px; color: #fff;}

        .btn_top_r{ overflow: hidden; height: 30px;line-height: 30px; width: 130px; text-align: center; background-color: rgb(11, 104, 84); border-radius: 5px; color: #fff;}

    </style>

</head>

<body>

    <div class="bd">

        <div style="height: 400px; background-color: rgb(33, 107, 172); position: relative;" id="demo">

            <div class="btn_animate" id="btnAnimate">点击向左移动</div>

            <div class="btn_ho" id="btnHo">点击切换</div>

            <div class="hide" id="hide">后显示</div>

            <div class="btn_go" id="go">点击变化</div>

        </div>

        <h2>注意：用animate效果的时候样式一定要定位</h2>

        <div style="height: 500px; background-color: rgb(34, 59, 99)" id="floor"></div>

        <div style="height: 500px; background-color: orangered"></div>

        <div class="btn_top" id="btnTop">scrollTop:top</div>

        <div class="btn_top_r" id="btnTop_r">offset().top</div>

    </div>

    <script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script>

    <script>

        $(function () {

            // 让指定元素左右移动

            $("#btnAnimate").on("click", function () {

                $(this).animate({

                    left: '+150px'

                }, "slow");

            });

            //在600毫秒内切换段落的高度和透明度

            $("#btnHo").on("click", function () {

                $("#btnAnimate").animate({

                    height: 'toggle',

                    opacity: 'toggle'

                }, "slow");

            });

            //用500毫秒将段落移到left为50的地方并且完全清晰显示出来（透明度为1）

            $("#go").click(function () {

                $("#hide").animate({

                    width: "40%",

                    height: "100%",

                    fontSize: "20px",

                    left: 50,

                    opacity: 'show'

                }, 500);

            });

            $("#btnTop").on("click",function(){

                //html,body是兼容Firfox与Chrome

                $("html,body").animate({"scrollTop":top})

            })

            $("#btnTop_r").on("click",function(){

                $("html,body").scrollTop($("#floor").offset().top - 50)

            })

        });

    </script>

</body>

</html>

效果图：

jQuery中animate与scrollTop、offset().top实例的更多相关文章

  1. jQuery中animate()的方法以及$(&quot;body&quot;).animate({&quot;scrollTop&quot;:top})不被Firefox支持问题的解决

    转载请注明出处:http://blog.csdn.net/dongdong9223/article/details/50846678 本文出自[我是干勾鱼的博客] jQuery中animate()的方 ...

  2. jQuery中animate()方法用法实例

    本文实例讲述了jQuery中animate()方法用法.分享给大家供大家参考.具体分析如下: 此方法用于创建自定义动画,并且能够规定动画执行时长.擦除效果.动画完成后还可以地触发一个回调函数. ani ...

  3. jQuery中animate动画第二次点击事件没反应

    jQuery中animate动画第二次点击事件没反应 用animate做点击翻页动画时发现第二次点击事件动画没反应,而第一次点击有动画效果,代码如下: 复制代码 代码如下: $(".page ...

  4. jQuery中Animate进阶用法（一）

    jQuery中animate的用法你了解多少呢?如果仅仅是简单的移动位置,显示隐藏,哦!天哪你在浪费资源!因为animate太强大了,你可以有很多意想不到的用法!让我们一起研究一下吧~~ 首先要了解j ...

  5. jQuery动画效果animate和scrollTop结合使用实例

    CSS属性值是逐渐改变的,这样就可以创建动画效果.只有数字值可创建动画(比如 "margin:30px").字符串值无法创建动画(比如 "background-color ...

  6. jquery中attr()与prop()函数用法实例详解(附用法区别)

    本文实例讲述了jQuery中attr()与prop()函数用法.分享给大家供大家参考,具体如下: 一.jQuery的attr()方法 jquery中用attr()方法来获取和设置元素属性,attr是a ...

  7. scrollTop,offset().top

    1.scrollTop是指滚动条滚动的距离 如果没有出现滚动条,则距离为0 css: <style type="text/css"> *{ margin: 0; pad ...

  8. jQuery中animate()方法以及$('body').animate({"scrollTop":top})不被Firefox支持问题的解决

    $("body").animate({"scrollTop":top}): 只被chrome支持,而不被Firefox支持 $("html" ...

  9. jQuery中Animate进阶用法（二）

    Step Type: Function( Number now, Tween tween )每个动画元素的每个动画属性将调用的函数.这个函数为修改Tween 对象提供了一个机会来改变设置中得属性值. ...

随机推荐

  1. Spring Boot 异步调用

    添加一个类ThreadPoolConfig.java package com.cjcx.inter.framework.config; import org.springframework.conte ...

  2. (4)activiti工作流引擎之uel表达式

    有了前面几章,我们肯定有一定的困惑,activiti如何与实际业务整合,比如一条采购单,如何跟一个流程实例互相关联起来? 这里就需要使用到activiti启动流程实例时设置一个流程实例的busines ...

  3. Excel VBA入门（九）操作工作薄

    虽然我前面讲过,在VBA中操作工作薄并不是件明智的事,但有些时候,还是避免不了要这么做.绝大多数情况下,我们要做的是获取到某个工作薄对象,并以此来获得其中的工作表对象,然后再对工作表中的数据进行处理. ...

  4. String对象不可改变的特性及内存机制

    JAVA中字符串类型String是不允许改变其内容的,下列语句是如何运行的:String s=new String("ABCD");s=s+"123": 最佳回 ...

  5. 搭建github博客，hexo主题

    买个域名,多少钱的都有,看自己喜欢,可以去万网,ali嘛. 一般在windows,下载gitbash(配置公钥,全局用户名和email),node.js(不用配置). 新建github项目,添加公钥( ...

  6. iOS App图标和启动画面尺寸

    注意:iOS所有图标的圆角效果由系统生成,给到的图标本身不能是圆角的. 1. 桌面图标 (app icon) for iPhone6 plus(@3x) : 180 x 180 for iPhone ...

  7. 4.jsp学习

    1.创建 2.命名 3.utf-8防止乱码 5.导出WAR文件

  8. PHP中SQL查询语句的id=%d解释

    在SQL语句中有一些写的是这样的: 'SELECT id FROM dbname WHERE xx_id = %d;', $bl['student_id'] 其中的“xx_id = %d”,这里的%d ...

  9. HBase 系列（二）安装部署

    HBase 系列(二)安装部署 本节以 Hadoop-2.7.6,HBase-1.4.5 为例安装 HBase 环境.HBase 也有三种模式:本地模式.伪分布模式.分布模式. 一.环境准备 (1) ...

  10. webform调用windows服务

    准备工作: .电脑->管理->本地用户和组->组->Administrator双击->隶属->添加Network service->确定 .启动windows ...