requireJS模塊化實(shí)現(xiàn)返回頂部功能的方法詳解

更新時(shí)間：2017年10月16日 12:05:59 作者：抽象思維

這篇文章主要介紹了requireJS模塊化實(shí)現(xiàn)返回頂部功能的方法,結(jié)合實(shí)例形式詳細(xì)分析了requireJS的使用步驟及返回頂部功能的相關(guān)操作技巧,需要的朋友可以參考下

本文實(shí)例講述了requireJS模塊化實(shí)現(xiàn)返回頂部功能的方法。分享給大家供大家參考，具體如下：

引用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
  })
});

創(chuàng)建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模塊

創(chuàng)建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
  }
});

希望本文所述對(duì)大家基于requireJS的程序設(shè)計(jì)有所幫助。

您可能感興趣的文章:

相關(guān)文章

JavaScript幾種彈窗事件的使用
這篇文章主要介紹了JavaScript幾種彈窗事件的使用,彈窗事件就是在我們執(zhí)行某操作的時(shí)候,彈出信息框給出提示?；蚴占瘮?shù)據(jù)的時(shí)候,彈出窗口收集信息,不想收集可以取消隱藏,下文介紹需要的朋友可以參考一下
2022-02-02
javascript實(shí)現(xiàn)發(fā)送短信倒計(jì)時(shí)
這篇文章主要為大家詳細(xì)介紹了javascript實(shí)現(xiàn)發(fā)送短信倒計(jì)時(shí)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-09-09
php類中static與self的使用區(qū)別淺析
在閱讀一些框架的源碼時(shí)發(fā)現(xiàn)了new static(),和new self(),甚是不解,后來(lái)查閱資料,才了解了,所以下面這篇文章主要給大家介紹了關(guān)于php類中static與self的使用區(qū)別的相關(guān)資料,需要的朋友可以參考下
2021-06-06
js中的push和join方法使用介紹
push和join方法想必大家并不陌生吧，在本文將為大家詳細(xì)介紹下js中的push和join方法的使用，感興趣的朋友可以參考下
2013-10-10
淺談JS中String()與 .toString()的區(qū)別
下面小編就為大家?guī)?lái)一篇淺談JS中String()與 .toString()的區(qū)別。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2016-10-10
微信小程序音樂(lè)播放器開(kāi)發(fā)
這篇文章主要為大家詳細(xì)介紹了微信小程序音樂(lè)播放器開(kāi)發(fā)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2019-11-11
JavaScript實(shí)現(xiàn)消消樂(lè)的源代碼
這篇文章主要介紹了JavaScript實(shí)現(xiàn)消消樂(lè)-源代碼,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2021-01-01
three.js著色器材質(zhì)的內(nèi)置變量示例詳解
這篇文章主要給大家介紹了關(guān)于three.js著色器材質(zhì)內(nèi)置變量的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用three.js具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2020-08-08
json屬性名為什么要雙引號(hào)(個(gè)人猜測(cè))
json屬性名為什么要雙引號(hào)？更加規(guī)范,利于解析、避免class等關(guān)鍵字引起的不兼容問(wèn)題,需要的朋友可以參考下
2014-07-07
中國(guó)地區(qū)三級(jí)聯(lián)動(dòng)下拉菜單效果分析
主要的數(shù)據(jù)和功能實(shí)現(xiàn)都是在js文件中,網(wǎng)上找的地區(qū)數(shù)據(jù)有的地方不完整,需要自己添加,本文將詳細(xì)介紹
2012-11-11