在移动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. pdf文件编辑

    下载软件:Foxit PDF Editor,这个工具挺好用的,可以对pdf文件内容进行编辑 Foxit PDF Editor 是第一个真正的PDF文件编辑软件.许多人都希望能找到一个象编辑其它类型的文 ...

  2. CF:Problem 426B - Sereja and Mirroring 二分或者分治

    这题解法怎么说呢,由于我是把行数逐步除以2暴力得到的答案,所以有点二分的意思,可是昨天琦神说是有点像分治的意思.反正总的来说:就是从大逐步细化找到最优答案. 可是昨晚傻B了.靠! 多写了点东西,然后就 ...

  3. 自定义circleindicator

    在此申明,并不是自己写的,只是为了方便日后使用 我使用的circleindicator是从大神的gitHub中弄来的, 使用如下: 一.在配置中导入 compile 'me.relex:circlei ...

  4. 识别不了socket未知的名称或服务

    个人博客地址:https://blog.sharedata.info/ socket 链接导致java.net.UnknownHostException: R1-T1-N6: R1-T1-N6: 未知 ...

  5. apache常用模块介绍

      mod_actions 基于媒体类型或请求方法,为执行CGI脚本而提供 mod_alias 提供从文件系统的不同部分到文档树的映射和URL重定向 mod_asis 发送自己包含HTTP头内容的文件 ...

  6. 【BZOJ1778】[Usaco2010 Hol]Dotp 驱逐猪猡 期望DP+高斯消元

    [BZOJ1778][Usaco2010 Hol]Dotp 驱逐猪猡 Description 奶牛们建立了一个随机化的臭气炸弹来驱逐猪猡.猪猡的文明包含1到N (2 <= N <= 300 ...

  7. An Ordinary Game(简单推导)

    An Ordinary Game Time limit : 2sec / Memory limit : 256MB Score : 500 points Problem Statement There ...

  8. Android jni 编程(参数的传递，成员，方法的)相互访问

    package com.test.androidjni; import android.app.Activity; import android.os.Bundle; import android.u ...

  9. mysql数据库访问授权

    1.进入MySQL服务器 d:\mysql\bin\> mysql -h localhost -u root; 2.赋予任何主机访问数据的权限 mysql> GRANT ALL PRIVI ...

  10. 安装Nginx 及使用

    1.下载 Nginx wget http://nginx.org/download/nginx-1.10.3.tar.gz   (稳定版) 2.提前下载好依赖包 openssl.zlib.pcre p ...