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

更新时间：2017年10月16日 12:05:59 作者：抽象思维

这篇文章主要介绍了requireJS模块化实现返回顶部功能的方法,结合实例形式详细分析了requireJS的使用步骤及返回顶部功能的相关操作技巧,需要的朋友可以参考下

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

您可能感兴趣的文章:

webpack4与babel配合使es6代码可运行于低版本浏览器的方法
这篇文章主要介绍了webpack4与babel配合使es6代码可运行于低版本浏览器的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-10-10
对于Javascript 执行上下文的全面了解
下面小编就为大家带来一篇对于Javascript 执行上下文的全面了解。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-09-09
使用微信小程序开发前端【快速入门】
本文从代码角度和宏观角度简单阐述了微信小程序在前端领域的一些内容和影响，希望能够帮助那些不了解微信小程序的开发者很快入门并认识这一新的技术领域。
2016-12-12
原生js实现焦点轮播图效果
本文主要分享了原生js实现焦点轮播图效果的示例代码，并解析了实例中的注意点。具有一定的参考价值，下面跟着小编一起来看下吧
2017-01-01
OpenLayers实现点要素图层的聚合显示的方法
在很多情况下，点要素图层中的要素数量可能会成百上千，如果一个点要素图层中的点数量很多，我们就会采取图层聚合的方式对其进行处理，本文就来介绍一下，感兴趣的可以了解一下
2021-09-09
JavaScript 字符串新增方法 trim() 的使用说明
这篇文章主要介绍了JavaScript字符串新增方法trim()的使用说明，文章围绕主题展开详细的内容介绍，具有一定的参考价值，需要的朋友可以参考一下
2022-09-09
JS如何显示防盗链的外站图片技巧示例
通常在开发测试环节，一些资源图片会出现防盗链的错误提示，本文就通过前端基础技术，实现基本的图片跨站显示效果，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-09-09
JavaScript 以对象为索引的关联数组
我们常说JavaScript原生支持json，因为我们可以认为json就是对JavaScript的Object对象的灵活应用。
2010-05-05
javascript:以前写的xmlhttp池,代码
用javascript写的xmlhttp池代码，最下面有调用方法
2008-05-05
原生js写的放大镜效果
在淘宝上购物时，总会看到类似放大镜的效果。以下为原生js写的一个放大镜效果，其中肯定有很多不足，请大牛们指正，谢啦
2012-08-08