Fügen Sie die Funktion „Zurück zum Anfang' mit requireJS hinzu

Dieses Mal werde ich Ihnen die Vorsichtsmaßnahmen bei der Verwendung von requireJS zum Hinzufügen der Return-to-Top-Funktion und der Verwendung von requireJS zum Hinzufügen der Return-to-Top-Funktion vorstellen ist ein praktischer Fall.

Das Beispiel in diesem Artikel beschreibt die Methode der requireJSModularisierung zur Implementierung der Return to Top-Funktion. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

Zitat requireJs

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

HTML-Teil

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


  

Erstellen Sie eine neue main.js

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

Erstellen Sie das Backtop-Modul 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 hängt vom scrollTo-Modul

ab Erstellen Sie 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
  }
});

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Detaillierte Erläuterung der Schritte zum Implementieren der Kopierfunktion in clipboard.js

Detaillierte Erläuterung von die Verwendung von objektorientiertem JS

Das obige ist der detaillierte Inhalt vonFügen Sie die Funktion „Zurück zum Anfang' mit requireJS hinzu. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!