jquery와 Requirejs가 구현한 맨 위로 돌아가는 컨트롤
2431 단어 JavaScriptjquery
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"
});
})
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
기초 정리 - 1문자 (String) 숫자 (Number) 불린 (Boolean) null undefined 심볼 (Symbol) 큰정수 (BigInt) 따옴표로 묶어 있어야 함 Not-A-Number - 숫자 데이터 / 숫자로 표...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.