在移动web项目的开发中，遇到一个通过点击页面自动到相应的楼层处的需求，最初的想法就是使用html的target属性进行切换，但实际效果十分死板，显得毫无交互性。该前端架构采用zepto这个轻库进行开发，它具有类似jQuery的语法，之后采用了animate({scrollTop:"100px"})这个函数进行页面的动画滚动，结果就是毫无效果。

　　通过查询zepto fx包的源码

transform = prefix + 'transform'

  cssReset[transitionProperty = prefix + 'transition-property'] =

  cssReset[transitionDuration = prefix + 'transition-duration'] =

  cssReset[transitionDelay    = prefix + 'transition-delay'] =

  cssReset[transitionTiming   = prefix + 'transition-timing-function'] =

  cssReset[animationName      = prefix + 'animation-name'] =

  cssReset[animationDuration  = prefix + 'animation-duration'] =

  cssReset[animationDelay     = prefix + 'animation-delay'] =

  cssReset[animationTiming    = prefix + 'animation-timing-function'] = ''

　　发现zepto的animate()源码采用css3的方式进行，而scrollTop属性不在css3的动画属性中，所以没有生效。接下来的方法就是自己写一个滚动条上下滚动的方法。初步的代码如下：

$.fn.scrollTo =function(options){

        var defaults = {

            toT : 0,    //滚动目标位置

            durTime : 500,  //过渡动画时间

            delay : 30,     //定时器时间

            callback:null   //回调函数

        };

        var opts = $.extend(defaults,options),

            timer = null,

            _this = this,

            curTop = _this.scrollTop(),//滚动条当前的位置

            subTop = opts.toT - curTop,    //滚动条目标位置和当前位置的差值

            index = 0,

            dur = Math.round(opts.durTime / opts.delay),

            smoothScroll = function(t){

                index++;

                var per = Math.round(subTop/dur);

                if(index >= dur){

                    _this.scrollTop(t);

                    window.clearInterval(timer);

                    if(opts.callback && typeof opts.callback == 'function'){

                        opts.callback();

                    }

                    return;

                }else{

                    _this.scrollTop(curTop + index*per);

                }

            };

        timer = window.setInterval(function(){

            smoothScroll(opts.toT);

        }, opts.delay);

        return _this;

    };

采用原型函数的方式，制做一个scrollTo方，效果还不错~~哈哈

调用方式为 :$("body").scrollTo( {toT : 0} );　　这就是最简单的回到顶部

具体demo如下

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>测试</title>

        <style>

            body{background: red;height: 3000px;text-align: center;}

            #clickToBack{position: fixed;left: 0;bottom: 0;width: 100%;height: 40px;line-height: 40px;

                background: white;}

        </style>

    </head>

    <body>

        <h1>我是头顶</h1>

        <div id="clickToBack">

            go back

        </div>

        <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js" ></script>

        <script>

            $.fn.scrollTo =function(options){

        var defaults = {

            toT : 0,    //滚动目标位置

            durTime : 500,  //过渡动画时间

            delay : 30,     //定时器时间

            callback:null   //回调函数

        };

        var opts = $.extend(defaults,options),

            timer = null,

            _this = this,

            curTop = _this.scrollTop(),//滚动条当前的位置

            subTop = opts.toT - curTop,    //滚动条目标位置和当前位置的差值

            index = 0,

            dur = Math.round(opts.durTime / opts.delay),

            smoothScroll = function(t){

                index++;

                var per = Math.round(subTop/dur);

                if(index >= dur){

                    _this.scrollTop(t);

                    window.clearInterval(timer);

                    if(opts.callback && typeof opts.callback == 'function'){

                        opts.callback();

                    }

                    return;

                }else{

                    _this.scrollTop(curTop + index*per);

                }

            };

        timer = window.setInterval(function(){

            smoothScroll(opts.toT);

        }, opts.delay);

        return _this;

    };

        </script>

        <script>

            //调用

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

                $("body").scrollTo({

                    toT: 0

                });

            })</script>

    </body>

</html>

（PS：本菜鸟注册博客园已经有一段时间了，这还是第一次发博客记录自己的学习，希望大家请多指教~~）

zepto不支持animate({scrollTop:"100px"})的解决办法的更多相关文章

  1. IE6不支持min-heightt和min-width的解决办法

    IE6不支持min-height的解决办法 最小高度min-height是很有用的,但IE6却不支持.真烦人.有没有办法呢? 我们可以利用IE6不识别!important来实现: height:aut ...

  2. PL/SQL不支持64位Oracle Client 解决办法

    解决X64操作系统PL/SQL连接报错问题 make sure you have the 32 bits oracle client installed 说明PLSQL Developer并不支持Or ...

  3. Windows10下运行Android Studio3.3时关于AMD处理器不支持Intel硬件加速的解决办法

    我的电脑是Thinkpad E485系列,CPU是AMD Ryzen 5 2500U,电脑预装系统是Windows10 X64家庭版,如下图所示: 下载安装了Android Studio3.3,创建了 ...

  4. 【转】ie8 不支持 position:fixed 的简单解决办法

    今天发现使用 position:fixed 的页面在firefox下没有问题,在IE8下却不能正常显示,在网上找了找,有不少相关文章,但是不是不起作用就是太复杂,后来终于发现一个简单的解决办法,就是在 ...

  5. ie8 不支持 position:fixed 的简单解决办法

    今天发现使用 position:fixed 的页面在firefox下没有问题,在IE8下却不能正常显示,在网上找了找,有不少相关文章,但是不是不起作用就是太复杂,后来终于发现一个简单的解决办法,就是在 ...

  6. zepto的返回顶部scrollTop的动画解决方法

    写移动端的时候,引入的zepto.js里的animate不包括scrollTop,所以返回顶部的时候,没有动画的效果.这里我使用的是setInterval的方法.代码详情如下 <!DOCTYPE ...

  7. Chrome不支持本地Ajax请求，解决办法

    Chrome不支持本地Ajax请求,当我在.html文件中访问.json文件时就会出现这个问题,就是说这个时候不能加载这个.html文件. 解决方式 打开Chrome快捷方式的属性中设置: 右击Chr ...

  8. Unity3d使用高通Vuforia发布IOS工程不支持64位的一些解决办法

    1.将Unit升级至4.6.x或5.0.x,将Vuforia差距升级到最新版本(vuforia-unity-mobile-android-ios-4-0-105 ) 2.平台Other Setting ...

  9. Nginx服务器不支持PATH_INFO的问题及解决办法

    最近在写一个小程序,然后里面自己写了个URL的处理器,比如说访问index.php/article 那么就会自动加载进来article页面,访问index.php/home就会自动加载home页面. ...

随机推荐

  1. Pexpect--example--hive.py解读

    python version 2.6.6 ; pexpect 2.3 login方法解读: def login (args, cli_username=None, cli_password=None) ...

  2. 在Linux下搭建Git服务器步骤

    环境: 服务器 CentOS6.6 + git(version 1.7.1) 客户端 Windows10 + git(version 2.8.4.windows.1)  ① 安装 Git Linux ...

  3. Redis(Windows安装方法与Java调用实例 & 配置文件参数说明 & Java使用Redis所用Jar包 & Redis与Memcached区别 & redis-cli.exe命令及示例)

    Windows下Redis的安装使用 0.前言 因为是初次使用,所以是在windows下进行安装和使用,参考了几篇博客,下面整理一下 1.安装Redis 官方网站:http://redis.io/ 官 ...

  4. PHP-Manual的学习----【语言参考】----【类型】-----【array数组】

    1.Array 数组  PHP 中的 数组 实际上是一个有序映射.映射是一种把 values 关联到 keys 的类型.此类型在很多方面做了优化,因此可以把它当成真正的数组,或列表(向量),散列表(是 ...

  5. 大数据学习系列（1）-- linux之文件系统结构介绍

    1./ 根目录 --------- 所有目录挂在其下 2./boot --------- 存放Ubuntu内核和系统启动文件.系统启动时这些文件先被装载. 3./etc --------- 系统的配置 ...

  6. 反应器模式 vs 生产者消费者模式

    相似点: 从结构上,反应器模式有点类似生产者消费者模式,即有一个或多个生产者将事件放入一个Queue中,而一个或多个消费者主动的从这个Queue中Poll事件来处理: 不同点: Reactor模式则并 ...

  7. Django之CURD插件2

    目标:达到下图拥有功能的实现 1.绑定编辑按钮 ************思路**************** 1.为编辑按钮添加样式,可以根据样式来进行判断在什么状态. 2.进入编辑模式,将可编辑的字 ...

  8. 我的Android进阶之旅------>Android关于Log的一个简单封装

    android.util.Log类,可以方便地用于在编码调试过程中打印日志.但是在发布后的产品中,如果有太多的日志打印,则会严重地影响性能.对android.util.Log类做一个简单的封装,当产品 ...

  9. git push问题 objects/pack/tmp_pack_XXXXXX': Permission denied

    1.上传时的权限问题 在执行git push origin master之后,上传过程中报出如下错误: objects/pack/tmp_pack_XXXXXX': Permission denied ...

  10. Open AI Gym简介

    介绍 OpenAI Gym是一款用于研发和比较强化学习算法的工具包,它支持训练智能体(agent)做任何事——从行走到玩Pong或围棋之类的游戏都在范围中. OpenAI Gym 是一个用于开发和比较 ...