jquery와 Requirejs가 구현한 맨 위로 돌아가는 컨트롤

2431 단어 JavaScriptjquery
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"
	});
})

좋은 웹페이지 즐겨찾기