微客导航 » 文章资讯 » requireJS模块化实现返回顶部功能的方法详解

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

2023-09-23 04:41:14 197

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

引用requireJs

html部分

新建main.js

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

创建backtop模块backtop.js

/**
*CreatedbyAdministratoron2016/3/24.
*/
define(["jquery","scrollTo"],function($,scroll){
functionbacktop(el,opts){
this.opts=$.extend({},backtop.default,opts);
this.$el=$(el);
this.scroll=newscroll.scrollTo({
dest:this.opts.dest,
speed:this.opts.speed
});
this._checkPostion();
if(this.opts.mode=="move"){
this.$el.on("click",$.proxy(this._move,this))
}else{
this.$el.on("click",$.proxy(this._go,this))
}
$(window).on("scroll",$.proxy(this._checkPostion,this))
};
backtop.prototype._move=function(){
this.scroll.move()
};
backtop.prototype._go=function(){
this.scroll.go()
};
backtop.prototype._checkPostion=function(){
if($(window).scrollTop()>this.opts.pos){
this.$el.fadeIn();
}else{
this.$el.fadeOut();
}
}
$.fn.extend({
backtop:function(opts){
returnthis.each(function(){
newbacktop(this,opts);
})
}
});
backtop.default={
mode:"move",
pos:100,
dest:0,
speed:800
}
return{
backtop:backtop
}
})

backtop依赖scrollTo模块

创建scrollTo.js

define(['jquery'],function($){
functionscrollTo(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的程序设计有所帮助。

返回顶部
3162201930
czq8825@qq.com

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

热门推荐

随机推荐