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

2019-11-19 15:09:50

字体：大中小

来源：转载

供稿：网友

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

引用requireJs

<script src="require.js" data-main="main"></script>

html部分

<!DOCTYPE html><html><head lang="en">  <meta charset="UTF-8">  <title></title>  <style>    body{padding: 0; margin: 0; height: 3000px}    .btn{width: 80px; height: 80px;      position: fixed; bottom: 0; left: 50%; background: #ddd}  </style>  <script src="require.js" data-main="main"></script></head><body>  <div id="top" class="btn"></div></body></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

/** * Created by Administrator on 2016/3/24. */define(["jquery","scrollTo"],function($, scroll){  function backtop(el,opts){    this.opts = $.extend({},backtop.default,opts);    this.$el = $(el);    this.scroll = new scroll.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){      return this.each(function(){        new backtop(this,opts);      })    }  });  backtop.default = {    mode:"move",    pos:100,    dest:0,    speed:800  }  return{    backtop:backtop  }})

backtop 依赖 scrollTo模块

创建scrollTo.js

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

上一篇：使用clipboard.js实现复制功能的示例代码

下一篇：JavaScript简单实现合并两个Json对象的方法示例