jquery 返回顶部（插件）

最新推荐文章于 2021-12-20 20:54:44 发布

han_hanker

最新推荐文章于 2021-12-20 20:54:44 发布

阅读量193

点赞数

分类专栏： jquery-plugin 文章标签： jquery 插件

本文链接：https://blog.csdn.net/u012258564/article/details/78715532

版权

jquery-plugin 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

转载请注明：http://write.blog.csdn.net/mdeditor#!postId=78715532

先前复习了jquery的插件写法主要是第二种，简单的例子练手

html

<body>
    <img src="images/45/bg.jpg" alt="" class="content">
    <span class='back'>
        <img src="images/45/nav.jpg">
    </span>
</body>

一般的写法

<script>
        $(function(){
            $(window).scroll(function(){
                if( $(window).scrollTop() >= $(window).height() ){
                    $('.back').fadeIn(1000, 'swing');
                }else{
                    $('.back').fadeOut(1000, 'swing');
                }
            });
            $('.back').click(function(){
                $('html, body').animate( { scrollTop: 0 }, 1000)  //回到scrollTop为0的位置
            });
        })
</script>

插件写法

<script type="text/javascript">
    ;(function($,window,document,undefined){
        $.fn.toTop= function(options){
            var defaults = {
                scrollTop: 0,
                appear: $(window).height(),
                scrollTime: 1000,
                fadeTime: 1000,
                fadeEasing: 'swing'
            }
            var opt = $.extend({},defaults , options);

            var _this = this;
            $(window).scroll(function(){
                if( $(window).scrollTop() >=  opt.appear){
                    _this.fadeIn(opt.fadeTime, opt.fadeEasing);
                }else{
                    _this.fadeOut(opt.fadeTime, opt.fadeEasing);
                }
            });
            this.click(function(){
                $('html, body').animate( { scrollTop: opt.scrollTop }, opt.scrollTime)  //回到scrollTop为0的位置
            });
        };
    })(jQuery,window,document);

    $('.back').toTop({
        scrollTop: '10px', //距离顶部的位置，默认为0
        appear: $(window).height(), //返回顶部图标的出现位置，默认为一个可是窗口的高度
        scrollTime: 1000,  //滚动的时间，默认 1000毫秒
        fadeTime: 1000,    //图标出现的动画时间，默认1000毫秒
        fadeEasing: 'swing'  // 图标出现的动画时间
    });
</script>

啥？还有一种面向对象的写法，研究了一下

面向对象的插件写法

<script type="text/javascript">
    ;(function($,window,document,undefined){
        var ScrollTop = function(ele,options){
            this.defaults = {
                scrollTop: 0,
                appear: $(window).height(),
                scrollTime: 1000,
                fadeTime: 1000,
                fadeEasing: 'swing'
            };
            this.$ele = ele;
            this.opt = $.extend({}, this.defaults,options);
        }
        ScrollTop.prototype.showObj = function(){
            var _this = this;
            $(window).scroll(function(){
                console.log(_this.defaults);
                if( $(window).scrollTop() >=  _this.opt.appear){
                    _this.$ele.fadeIn(_this.opt.fadeTime, _this.opt.fadeEasing);
                }else{
                    _this.$ele.fadeOut(_this.opt.fadeTime, _this.opt.fadeEasing);
                }
            });
        };
        ScrollTop.prototype.clickEvent = function(){
            var _this = this;
            _this.$ele.click(function(){
                $('html, body').animate( { scrollTop: _this.opt.scrollTop }, _this.opt.scrollTime)  //回到scrollTop为0的位置
            });
        }
        $.fn.toTop= function(options){
            var obj = new ScrollTop(this,options);
            obj.showObj();
            obj.clickEvent();
        };
    })(jQuery,window,document);

    $('.back').toTop({
        scrollTop: '10px', //距离顶部的位置，默认为0
        appear: $(window).height(), //返回顶部图标的出现位置，默认为一个可是窗口的高度
        scrollTime: 1000,  //滚动的时间，默认 1000毫秒
        fadeTime: 1000,    //图标出现的动画时间，默认1000毫秒
        fadeEasing: 'swing'  // 图标出现的动画时间
    });
</script>

han_hanker

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery 返回顶部（插件）

转载请注明：http://write.blog.csdn.net/mdeditor#!postId=78715532先前复习了jquery的插件写法主要是第二种，简单的例子练手htmlbody> img src="images/45/bg.jpg" alt="" class="content"> span class='back'> img sr
复制链接

扫一扫