<!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. VS2010生成的文件在别的机器上运行提示“丢失MSVCR100D.dll”<转>

    用vs2010编写的程序经常会发生的一个问题.在自己的机器上运行的好好的,但是在别的机器上就会发生没有找到MSVCR100D.dll.这是 个很头疼的问题.对于一些代码量几百行的小程序,我不可能要求其 ...

  2. Linux CentOS修改网卡IP/网关设置

    1. 修改对应网卡IP的配置文件 修改以下内容 2. 修改对应网卡的网关的配置文件 vi /etc/sysconfig/network 修改以下内容 3. CentOS 修改DNS 修改以下内容 4. ...

  3. 在VMware Workstation中安装Ubuntu Server 16.04.5图解教程

    最近要在Ubuntu中部署openstack,为了节省空间和内存,最终选择了Ubuntu服务器.看了很多前辈和大佬的安装教程,在这里记录一下我自己的Ubuntu Server 16.04.5的安装过程 ...

  4. $or操作符

    [$or操作符] The $or operator performs a logical OR operation on an array of two or more <expressions ...

  5. Spring集成Mybatis配置文件的简单理解

    详情可见官方文档http://www.mybatis.org/spring/zh/index.html 一.需要配置的对象实例 1.SqlSessionFactoryBean 在 MyBatis-Sp ...

  6. SpringBoot配置Shiro时@RequiresRoles不起作用

    在SpringBoot中配置Shiro,结果@RequiresRoles.@RequiresPermissions等注解都无效 解决方法: 在ShiroConfiguration中注入开启支持aop. ...

  7. win10如和设置远程桌面

    最近几天一直在搞远程桌面问题,电脑一直连不上远程,今天终于出来了. 前提前提  条件,要电脑允许Administrator用户,先把电脑切换到那个用户,然后进行下面操作. 1.在桌面,我的电脑图标,鼠 ...

  8. iOS对HTTPS证书链的验证原理

    今天看到所在的某个开发群问https原理,之前做HTTPS ,下面简单说下原理.希望能帮助你理解. HTTPS从最终的数据解析的角度,与HTTP相同.HTTPS将HTTP协议数据包放到SSL/TSL层 ...

  9. info信息总结

    查询info信息 [[NSBundle mainBundle] infoDictionary] 以下是对应的输出 { BuildMachineOSBuild = 15C50; CFBundleDeve ...

  10. Linux mmap函数简介

    一.简介 Linux提供了内存映射函数mmap, 它把文件内容映射到一段内存上(准确说是虚拟内存上), 通过对这段内存的读取和修改, 实现对文件的读取和修改, 先来看一下mmap的函数声明: 头文件: ...