requireJs模块化实现返回顶部的功能

来源：互联网发布：黑帽seo 编辑：程序博客网时间：2024/05/21 13:39

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

1 0