在移动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. mysql 与mongodb的特点与优劣

    首先我们来分析下mysql 与mongodb的特点与优劣.下面是我以前做的ppt的部分截图. 再来分析下应用场景,a.如果需要将mongodb作为后端db来代替mysql使用,即这里mysql与mon ...

  2. java getResourcesAsStream()如何获取WEB-INF下的文件流

    getResourcesAsStream()来读取.properties文件,但是getResourcesAsStream()仅在java项目时能获取根目录的文件: 在web项目中,getResour ...

  3. 【JavaScript】BOM和DOM

    在第一篇JavaScript视频总结博客中.是对JavaScript做了一个宏观的认识.当中,不知道大家可否还记得.JavaScript的核心部分包含哪些? JavaScript的核心部分主要包含三个 ...

  4. Linux环境下，使用PHP创建一个守护进程

    <?php $pid = pcntl_fork(); // fork if ($pid < 0) exit; else if ($pid) // parent exit; else { / ...

  5. 开启貌似已经过时很久的新坑：SharePoint服务器端对象模型

    5年前(嗯,是5年前),SharePoint 2010刚发布的时候,曾经和kaneboy试图一起写一本关于SharePoint 2010开发的书,名字叫<SharePoint 2010 应用开发 ...

  6. POJ 1518 A Round Peg in a Ground Hole【计算几何=_=你值得一虐】

    链接: http://poj.org/problem?id=1584 http://acm.hust.edu.cn/vjudge/contest/view.action?cid=22013#probl ...

  7. 九度OJ 1182：统计单词 （计数）

    时间限制:1 秒 内存限制:32 兆 特殊判题:否 提交:3920 解决:1443 题目描述: 编一个程序,读入用户输入的,以"."结尾的一行文字,统计一共有多少个单词,并分别输出 ...

  8. linux 11 -- mount，umount

    Linux 文件系统是一个以 / 为根的大树,我们在不同的设备和分区上都有文件系统.我们如何处理这种明显的不一致性?根 (/) 文件系统是在初始化过程中挂载的.您创建的其他每个文件系统在挂载 在挂载点 ...

  9. 内存写越界导致破环堆结构引起的崩溃问题定位经验[如报错malloc(): memory corruption或free(): invalid next size]

    前段时间开发的一个后端C模块上线后,线上出core,初始时,因为訪问压力不大,所以崩溃是上线3天左右出现的.当时用gdb跟进调用堆栈并检查源代码,发现出core位置的代码沒有啥问题.因为当时开发任务较 ...

  10. Redis持久化——RDB（一）

    核心知识点: 1.RDB:将当前数据生成快照保存到硬盘 2.手动触发 save:会阻塞Redis服务器直到RDB完成. bgsave:执行fork创建子进程,由子进程负责RDB操作,阻塞只发生在for ...