Add return to top function with requireJS-JS Tutorial-php.cn

This time I will bring you how to userequireJS to add the return to the top function, and use requireJS to add the return to the top function. .

The example in this article describes the method of requireJS Modularization

to implement the return to top function. Share it with everyone for your reference, the details are as follows:Quote requireJs

Copy after login

html part

Copy after login

Create new main.js

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

Copy after login

Create backtop module 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 } })

Copy after login

backtop depends on scrollTo module

Create 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 } });

Copy after login

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!