编程 Javascript

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

Posted in Javascript onOctober 16, 2017

本文实例讲述了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的程序设计有所帮助。

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

- Author -

抽象思维

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

JavaScript Cookie的读取和写入函数

Dec 08 Javascript

javascript针对DOM的应用分析（三）

Apr 15 Javascript

JavaScript数组去重的3种方法和代码实例

Jul 01 Javascript

Bootstrap进度条组件知识详解

May 01 Javascript

js实现华丽的九九乘法表效果

Mar 29 Javascript

Javascript实现base64的加密解密方法示例

Jun 27 Javascript

浏览器调试动态js脚本的方法(图解)

Jan 19 Javascript

js中时间格式化的几种方法

Jul 22 Javascript

用npm安装vue和vue-cli,并使用webpack创建项目的方法

Sep 28 Javascript

vueScroll实现移动端下拉刷新、上拉加载

Mar 22 Javascript

学前端,css与javascript重难点浅析

Jun 11 Javascript

vue打包时去掉所有的console.log

Apr 10 Vue.js

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

Oct 16 #Javascript

seajs实现强制刷新本地缓存的方法分析

Oct 16 #Javascript

基于ajax和jsonp的原生封装(实例)

Oct 16 #Javascript

AngularJS实现注册表单验证功能

Oct 16 #Javascript

原生js的ajax和解决跨域的jsonp(实例讲解)

Oct 16 #Javascript

基于js原生和ajax的get和post方法以及jsonp的原生写法实例

Oct 16 #Javascript

Vue 2.0学习笔记之Vue中的computed属性

Oct 16 #Javascript