zepto解决scrollTop方法

系统管理员 2023-10-09 11:16 21阅读 0赞

原因：在移动web项目的开发中，遇到一个通过点击页面自动到相应的位置处的需求，该前端架构采用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;
        };

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

$('html,body').scrollTo(\{toT:$(".like\_wrap").offset().top\}) 到具体位置