jquery跟requirejs实现的回到顶部控件
jquery和requirejs实现的回到顶部控件
1,js代码
2,使用方式
1,js代码
define(['jquery'],function ($) { function ScrollTo(opts){ this.opts = $.extend({},ScrollTo.DEFAULT,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 () { if($(window).scrollTop() != this.opts.dest){ this.$el.scrollTop(this.opts.dest); } } ScrollTo.DEFAULT = { dest:0, speed:800 } return { ScrollTo:ScrollTo } });
define(["jquery","scrollto"],function($,scrollto){ function BackTop(el,opts){ this.opts = $.extend({},BackTop.DEFAULT,opts); this.$el=$(el); this.scroll = new scrollto.ScrollTo({ dest:0, speed:this.opts.speed }); this._checkPosition(); 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._checkPosition,this)); } BackTop.DEFAULT = { mode:"move", pos:$(window).height(), speed:800 }; BackTop.prototype._move = function(){ this.scroll.move(); } BackTop.prototype._go = function(){ this.scroll.go(); } BackTop.prototype._checkPosition = function(){ if($(window).scrollTop() > this.opts.pos){ this.$el.fadeIn(); }else{ this.$el.fadeOut(); } } $.fn.extend({ backtop:function(opts){ return this.each(function(){ new BackTop(this,opts); }); } }); return { BackTop:BackTop } });
2,使用方式
requirejs.config({ paths:{ jquery:"jquery-1.7.2.min" } }); requirejs(["jquery","scroolBar"],function($,scroolBar){ $("#backTop").backtop({ mode:"move" }); })