`

jquery和requirejs实现的回到顶部控件

阅读更多
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"
	});
})
分享到:
评论

相关推荐

    jquery-requirejs

    在现代Web开发中,JavaScript库如jQuery和模块化工具如RequireJS在构建高效、可维护的大型应用中起着至关重要的作用。`jQuery-requirejs`这个压缩包文件集成了这两者,旨在帮助开发者实现更灵活、优化的代码组织和...

    requirejs实现的简单的类定义

    RequireJS是一个流行的AMD(Asynchronous Module Definition)规范的实现,它允许我们在浏览器环境中实现异步加载和组织JavaScript模块。本篇文章将深入探讨如何使用RequireJS实现简单的类定义。 首先,了解...

    Starter-jQuery-RequireJS-SVG:一个包含SVG嵌入式HTML的入门项目,可通过jQueryRequireJS进行交互

    该项目可用于使用SVG,jQuery和RequireJS来启动新网页。示范可以在以下URL上找到GitHub项目页面: : 项目使用jQuery的“ click()”方法将静态创建的SVG项目注册到onclick事件将SVG项目动态附加到DOM并通过jQuery...

    RequireJs-Tutorial:一些使用 VS2013、JQUERY 和 RequireJS 编写的源代码

    3. **模块定义(Module Definition)**: 使用 `define()` 函数定义模块,其中包含模块的依赖和实现。例如: ```javascript define(['jquery'], function($) { // 使用 jQuery 的代码 }); ``` 4. **加载...

    webinit:快速的 htmlcssjs 项目初始化器,包括 css reset、jquery 和 requirejs

    适用于 Mac 和 Linux 的简单 Web 项目初始值设定项该脚本生成一个简单的 web 项目初始化,包括 css reset、jquery 和 requirejs。 您可以修改 foo 文件夹以使您的初始化文件夹适应您的需要。如何安装 ? 转到您的主...

    requirejs-jquery-jquerymobile-jqueryui-boilerplate:jQuery、jQuery 移动和 jQuery UI 在 requirejs 中的实现样板

    jQuery、jQuery 移动和 jQuery UI 在 requirejs 中的实现样板 安装requirejs sudo npm install -g requirejs 安装凉亭 sudo npm install -g bower 在项目目录中创建一个文件:bower.json { "name": "My ...

    ionic+requirejs实现图片懒加载

    标题 "ionic+requirejs实现图片懒加载" 描述了一个使用Ionic框架和RequireJS库来创建一个具有图片懒加载功能的移动应用项目。这个项目旨在优化用户体验,特别是在移动设备上,通过延迟加载非可视区域的图片,减少...

    AngularJS+RequireJs实现动态加载JS和页面

    AngularJS+RequireJs实现动态加载JS和页面,这是笔者在网上找到的一份方案源码。笔者在这个基础上自己搭建了一个动态加载的方案,具体看这里http://blog.csdn.net/evankaka/article/details/52502776

    AngularJS+RequireJs实现动态加载JS和页面的方案研究.pdf

    在本文档中,我们探讨了如何使用AngularJS和RequireJS结合来实现动态加载JavaScript和页面。AngularJS是一个强大的前端框架,用于构建单页应用程序(SPA),而RequireJS则是一个模块化加载器,它有助于管理应用程序...

    requireJS初学者完整例子

    `define`函数用于定义模块,其参数是一个数组,表示该模块的依赖,接着是回调函数,函数的参数与依赖数组一一对应,这样就实现了依赖注入。 在实际项目中,你可能会有多个模块,比如视图(views)、模型(models)...

    探索angularjs+requirejs全面实现按需加载的套路

    想同时实现这些目标,就必须有一套按需加载的机制,页面上展现的内容和所有需要依赖的文件,都可以根据业务逻辑需要按需加载。最近都是基于angularjs做开发,所以本文主要围绕angularjs提供的各种机制,探索全面实现...

    RequireJS进阶(一)

    总结,RequireJS 是一种强大的 JavaScript 模块管理和加载工具,通过 AMD 规范实现了模块化,解决了浏览器端的依赖管理问题。通过学习和熟练掌握 RequireJS,开发者可以构建更加清晰、高效、易于维护的前端应用。

    requirejs_Demo演示

    通过`define`函数定义模块,该函数接收两个参数:模块ID(可选)和一个回调函数,回调函数返回模块的接口。 ```javascript define('moduleA', [], function() { var moduleA = { // ... 模块A的代码 }; return ...

    使用gulp和requirejs快速构建一个前端项目

    在前端开发领域,高效的工作流程和模块化管理是提高生产力的关键。`gulp` 和 `requireJS` 是两个非常...通过 `gulp` 实现文件的处理和打包,通过 `requireJS` 管理模块依赖,两者协同工作,大大提高前端开发的效率。

    SeaJS与RequireJS区别

    **SeaJS 和 RequireJS 是两种广泛使用的 JavaScript 模块加载器和依赖管理工具,它们的主要目的是解决 JavaScript 在浏览器端的异步加载和模块化问题。** **SeaJS** SeaJS 是一个轻量级的模块加载器,由中国淘宝...

    requireJS实例

    总之,"requireJS实例Demo" 是一个很好的实践平台,它让我们了解和掌握 RequireJS 如何帮助我们管理和组织 JavaScript 代码,实现模块化开发,提高代码质量和项目效率。通过学习这个实例,你将能够更好地理解 ...

    requirejs demo

    这个"requirejs demo"应该包含了一个使用RequireJS的示例项目,用于演示如何配置和使用RequireJS来优化前端开发。 RequireJS 的核心概念有以下几点: 1. **模块化**:RequireJS 将JavaScript代码分解为独立的模块...

    RequireJS入门(一)

    RequireJS 是一个 JavaScript 模块加载器和打包工具,它使得在浏览器环境中可以实现模块化开发,解决了传统 JavaScript 文件依赖关系混乱的问题。本篇文章将对 RequireJS 的基本概念、使用方法及重要特性进行深入...

    RequireJS入门(三)

    定义模块是通过 `define` 函数完成的,它接收两个参数:模块名(可选)和依赖(数组),然后是一个回调函数,该函数内部实现了模块的功能: ```javascript define('myModule', ['jquery', 'underscore'], function...

    angularjs_requirejs demo

    **RequireJS** 则是一个JavaScript模块加载器和打包工具,它遵循AMD(Asynchronous Module Definition)规范,使得JavaScript可以实现异步模块加载,从而解决了大型项目中代码的组织和依赖管理问题。通过RequireJS,...

Global site tag (gtag.js) - Google Analytics