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 相关文章推荐
基于Web标准的UI组件 — 树状菜单(2)
Sep 18 Javascript
javascript oop开发滑动(slide)菜单控件
Aug 25 Javascript
jQuery.get、jQuery.getJSON、jQuery.post无法返回JSON问题的解决方法
Jul 28 Javascript
JavaScript删除数组元素的方法
Mar 20 Javascript
JavaScript DOM元素尺寸和位置
Apr 13 Javascript
jQuery实现在下拉列表选择时获取json数据的方法
Apr 16 Javascript
JavaScript实现获得所有兄弟节点的方法
Jul 23 Javascript
javascript函数命名的三种方式及区别介绍
Mar 22 Javascript
收藏AngularJS中最重要的核心功能
Jul 09 Javascript
React Form组件的实现封装杂谈
May 07 Javascript
JS使用正则表达式提交页面验证的代码
Oct 16 Javascript
vue中实现点击变成全屏的多种方法
Sep 27 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
详细介绍:Apache+PHP+MySQL配置攻略
2006/09/05 PHP
浅析SVN常见问题及解决方法
2013/06/21 PHP
PHP二维数组排序的3种方法和自定义函数分享
2014/04/09 PHP
InnerHtml和InnerText的区别分析
2009/03/13 Javascript
ie focus bug 解决方法
2009/09/03 Javascript
UI Events 用户界面事件
2012/06/27 Javascript
node.js中的fs.truncateSync方法使用说明
2014/12/15 Javascript
6种javascript显示当前系统时间代码
2015/12/01 Javascript
纯js实现倒计时功能
2017/01/06 Javascript
jquery实现tab选项卡切换效果(悬停、下方横线动画位移)
2017/05/05 jQuery
Angular2学习教程之ng中变更检测问题详解
2017/05/28 Javascript
微信小程序 本地图片按照屏幕尺寸处理
2017/08/04 Javascript
微信小程序下拉刷新界面的实现
2017/09/28 Javascript
微信小程序BindTap快速连续点击目标页面跳转多次问题处理
2019/04/08 Javascript
tweenjs缓动算法的使用实例分析
2019/08/26 Javascript
node.js 如何监视文件变化
2020/09/01 Javascript
在Python的web框架中中编写日志列表的教程
2015/04/30 Python
python破解zip加密文件的方法
2018/05/31 Python
Windows下Anaconda2安装NLTK教程
2018/09/19 Python
Python控制Firefox方法总结
2019/06/03 Python
Python之pymysql的使用小结
2019/07/01 Python
Python爬取腾讯视频评论的思路详解
2019/12/19 Python
基于Python3.6中的OpenCV实现图片色彩空间的转换
2020/02/03 Python
python实现感知机模型的示例
2020/09/30 Python
销售经理工作职责
2014/02/03 职场文书
家教广告词
2014/03/19 职场文书
大学竞选班长演讲稿
2014/04/24 职场文书
仲裁协议书
2014/09/26 职场文书
人身损害赔偿协议书格式
2014/11/01 职场文书
村官个人总结范文
2015/03/03 职场文书
亲戚关系证明
2015/06/24 职场文书
golang正则之命名分组方式
2021/04/25 Golang
漫画《尖帽子的魔法工坊》宣布动画化
2022/04/06 日漫
Java数组详细介绍及相关工具类
2022/04/14 Java/Android
利用Java连接Hadoop进行编程
2022/06/28 Java/Android
SQL中去除重复数据的几种方法汇总(窗口函数对数据去重)
2023/05/08 MySQL