在移动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. Android DIY之路 （一） 指定区域多图片合成 放大 缩小 镜像 旋转 等（转）

    惯例先看效果图 // 注意做类似这种模板功能时候 方位由后台数据提供,这里我们用假数据 4个点 或者xy 加区域来做示例 //一开始我们公司用的是透明盖住 操作图片 但发现 局限性较大.后来直接限定区 ...

  2. Android hellocharts 柱形图详解

    近日需要做图表结构的项目,目前最火的就是hellocharts  和MPAndroidChart  相对来说hellocharts集成比较简单: 官网地址   https://github.com/l ...

  3. 【python】-- web开发之CSS

    CSS CSS作用概述:(通俗的讲就是将HTML这个赤裸裸的“人”,穿上华丽的衣服) CSS 指层叠样式表 (Cascading Style Sheets) 样式定义如何显示 HTML 元素 样式通常 ...

  4. GTK+重拾--07 GTK+中的事件

    (一):写在前面 在这一个小节中,我们主要是学习GTK+2.0中最重要的部分.就是信号和事件.GTK+函数工具库是基于"事件"系统的.全部的GUI应用都是基于"事件&qu ...

  5. python3 计算文件夹中所有py文件里面代码行数，注释行数，空行数

    import os,re #代码所在位置 FILE_PATH = './' def analyze_code(codefilesource): ''' 打开一个py文件统计其中的代码行数,包括空格和注 ...

  6. Linux shell join命令详解

    Linux join命令 2012-02-09 17:49:00| 分类: SHELL | 标签:linux join 文件连接 |字号 订阅join命令 功能:“将两个文件里指定栏位同样的行连接起来 ...

  7. shell编程2 ---条件判断语句

    shell编程2 一.条件判断语句 1.按照文件类型进行判断 eg:test -e /etc/passwd  或者  [ -e /etc/passwd ]  &&echo yes || ...

  8. 机器学习Coursera学习总结

    Coursera上Andrew NG的机器学习实在是太火了,最近有时间花费了20来天的时间(每天3小时左右)终于学习完了全部的课程,总结如下: (1)适合入门,讲的比较基础,Andrew讲的很棒: ( ...

  9. 请简单介绍一下Spring

    Spring 是一个开源框架,是为了解决企业应用程序开发复杂性而创建的.框架的主要优势之一就是其分层架构,分层架构允许您选择使用哪一个组件,同时为 J2EE 应用程序开发提供集成的框架. Spring ...

  10. jQuery：[1]实现图片上传并预览

    jQuery:[1]实现图片上传并预览 原理 预览思路 1.当上传对象的input被触发并选择本地图片之后获取要上传的图片对象的URL: 2.把对象URL赋值给实现写好的img标签的src属性 Fil ...