在移动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. 嵌入式开发之web服务器---boa移植

    近段时间在做ti8148的编解码器又涉及到boa web服务器的移植.在移植到ARM开发板的过程中,遇到很多的问题.原先的自带thttpd 由于功能没有boa完善,比如在ubuntu下面的utf-8编 ...

  2. SPSS统计功能与模块对照表

    SPSS统计功能 - 应用速查表第一列为统计方法,中间为统计功能,最后一列为所在模块 1 ANOVA Models(单因素方差分析:简单因子) : 摘要 描述 方差 轮廓 - SPSS Base 2 ...

  3. c# 控制台程序 隐藏控制台窗口

    在某些项目中,需要采用控制台程序,但是又不需要通过dos窗口进行交互,同时打算隐藏掉难看的控制台窗口.实现的方法很多,有的是修改链接命令.我采用的方法略有些麻烦,首先是给窗口命名,之后找到该窗口指针, ...

  4. Map集合按value的大小排序

    public static void main(String[] args) { Map<String, Integer> map = new HashMap<String, Int ...

  5. iOS-事件传递和响应机制

    转自:http://www.jianshu.com/p/2e074db792ba 前言: 按照时间顺序,事件的生命周期是这样的: 事件的产生和传递(事件如何从父控件传递到子控件并寻找到最合适的view ...

  6. 关于iOS的手势UIGestureRecognizer问题

    typedef NS_ENUM(NSInteger, UIGestureRecognizerState) { UIGestureRecognizerStatePossible, // 尚未识别是何种手 ...

  7. Linux安装python3.7.2详细操作步骤

    1.下载Python依赖环境 yum install gcc patch libffi-devel python-devel zlib-devel bzip2-devel openssl-devel ...

  8. SQL的优化1

    1.对查询进行优化,应尽量避免全表扫描,首先应考虑在 where 及 order by 涉及的列上建立索引. 2.应尽量避免在 where 子句中对字段进行 null 值判断,否则将导致引擎放弃使用索 ...

  9. value too great for base (error token is "08")

    shell 中,经常有定时任务, 这时候shell脚本中一般会对时间进行一些判断,或者相关逻辑的操作 这时候,如果你获取的小时或者分钟是08,09,如果要再对其进行运算符或者比较的话,就会报标题的错误 ...

  10. 第6条：在单次切片操作内，不要同时指定start、end和stride

    核心知识点: 1.使用负步进可以反转取值字符串及ASCII. 2.stride最好不要与start和end用在一起,会降低代码可读性. 除了基本的切片操作之外,python还提供了somelist[s ...