requireJSでトップに戻る関数を追加

今回は、requireJSを使用して先頭に戻る関数を追加する場合と、requireJSを使用して先頭に戻る関数を追加する場合の注意事項を紹介します。実際のケースを見てみましょう。

この記事の例では、先頭に戻る関数を実装するためのrequireJSmodularityのメソッドを説明しています。参考のために皆さんと共有してください。詳細は次のとおりです:

引用 requireJs

<script src="require.js" data-main="main"></script>

HTML 部分

rreee

新しい main.js を作成します

  
  
  
  <script src="require.js" data-main="main"></script>


  

バックトップモジュールbacktop.jsを作成する

require.config({
  paths:{
    jquery:'jquery'
  }
});
requirejs(['jquery','backtop'],function($,backtop){
  $('#top').backtop({
    mode:"move",
    pos:100,
    dest:500,
    speed:20000
  })
});

backtop は、scrollTo モジュールに依存します

scrollTo.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
  }
})

この記事の事例を読んだ後、あなたはその方法をマスターしたと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

clipboard.jsでコピー機能を実装する手順の詳細な説明

JSオブジェクト指向の使用方法の詳細な説明

以上がrequireJSでトップに戻る関数を追加の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。