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的程序设计有所帮助。

Javascript 相关文章推荐
JavaScript的Cookies
Jan 16 Javascript
js保存当前路径(cookies记录)
Dec 14 Javascript
Javascript排序算法之合并排序(归并排序)的2个例子
Apr 04 Javascript
原生javascript实现简单的datagrid数据表格
Jan 02 Javascript
jQuery实现鼠标经过图片变亮其他变暗效果
May 08 Javascript
jQuery实现非常实用漂亮的select下拉菜单选择效果
Nov 06 Javascript
微信小程序  wx.request合法域名配置详解
Nov 23 Javascript
JS定义函数的几种常用方法小结
May 23 Javascript
node.js中process进程的概念和child_process子进程模块的使用方法示例
Feb 11 Javascript
JS正则表达式验证密码强度
Mar 18 Javascript
jQuery实现动态加载瀑布流
Sep 01 jQuery
原生JS实现pc端轮播图效果
Dec 21 Javascript
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
You might like
DOMXML函数笔记
2006/10/09 PHP
thinkphp中空模板与空模块的用法实例
2014/11/26 PHP
主流PHP框架的优缺点对比分析
2014/12/25 PHP
PHP将进程作为守护进程的方法
2015/03/19 PHP
PHP实现文件下载【实例分享】
2017/04/28 PHP
PHP有序表查找之二分查找(折半查找)算法示例
2018/02/09 PHP
Jquery AJAX 框架的使用方法
2009/11/03 Javascript
一些相见恨晚的 JavaScript 技巧
2010/04/25 Javascript
javascript整除实现代码
2010/11/23 Javascript
基于jQuery的图片左右无缝滚动插件
2012/05/23 Javascript
jquery对象和DOM对象的区别介绍
2013/08/09 Javascript
简单的Jquery全选功能
2013/11/07 Javascript
js控制容器隐藏出现防止样式变化的两种方法
2014/04/25 Javascript
javascript滚轮事件基础实例讲解(37)
2017/02/14 Javascript
canvas实现弧形可拖动进度条效果
2017/05/11 Javascript
Angularjs cookie 操作实例详解
2017/09/27 Javascript
Vue利用canvas实现移动端手写板的方法
2018/05/03 Javascript
微信小程序3D轮播实现代码
2019/09/19 Javascript
javascript实现京东登录显示隐藏密码
2020/08/02 Javascript
Python实现去除图片中指定颜色的像素功能示例
2019/04/13 Python
python FTP批量下载/删除/上传实例
2019/12/22 Python
深入浅析HTML5中的article和section的区别
2018/05/15 HTML / CSS
HTML5逐步分析实现拖放功能的方法
2020/09/30 HTML / CSS
凯普林包包西班牙官网:Kipling西班牙
2019/04/12 全球购物
办理信用卡工作证明
2014/01/11 职场文书
自动化毕业生专业自荐书范文
2014/02/04 职场文书
公司股权转让协议书
2014/04/12 职场文书
双方协议书
2014/04/22 职场文书
2014年老干部工作总结
2014/11/21 职场文书
论文致谢词范文
2015/05/14 职场文书
初中地理教学反思
2016/02/19 职场文书
文明医院的标语集锦!
2019/07/24 职场文书
jdbc使用PreparedStatement批量插入数据的方法
2021/04/27 MySQL
Python3 类型标注支持操作
2021/06/02 Python
mysq启动失败问题及场景分析
2021/07/15 MySQL
vue 自定义组件添加原生事件
2022/04/21 Vue.js