requireJS模块化实现返回顶部功能的方法详解

本文实例讲述了requireJS模块化实现返回顶部功能的方法。分享给大家供大家参考，具体如下：

引用requireJs

rush:js;">

新建main.js

rush:js;"> require.config({ paths:{ jquery:'jquery' } }); requirejs(['jquery','backtop'],function($,backtop){ $('#top').backtop({ mode:"move",pos:100,dest:500,speed:20000 }) });

创建backtop模块 backtop.js

this.opts.pos){ this.$el.fadeIn(); }else{ this.$el.fadeOut(); } } $.fn.extend({ backtop:function(opts){ return this.each(function(){ new backtop(this,opts); }) } }); backtop.default = { mode:"move",dest:0,speed:800 } return{ backtop:backtop } })

backtop 依赖 scrollTo模块

创建scrollTo.js

rush:js;"> define(['jquery'],function($){ function scrollTo(opts){ this.opts = $.extend({},scrollTo.DEFAULTS,opts); this.$el = $("html,body"); } scrollTo.prototype.move = function(){ if($(window).scrollTop() != this.opts.dest){ //if(!this.$el.is(":animated")){ this.$el.animate({scrollTop:this.opts.dest},this.opts.speed); //} } }; scrollTo.prototype.go = function(){ this.$el.scrollTop(this.opts.dest) }; scrollTo.DEFAULTS = { dest:0,speed:800 }; return { scrollTo:scrollTo } });

希望本文所述对大家基于requireJS的程序设计有所帮助。