jquery 返回顶部 IE Quircks 的兼容

我写了一个用于兼容IE的fix的返回顶部插件。

(function($) {
    var _opts_default = {
        startline: 1,
        title: '返回顶部',
        bottom: 50,
        right: 50,
        scrollto: 0,
        scrollduration: 200,
        fadeduration: [500, 100],
        html: '<img style="width:54px; height:54px; border:0;" />',
        opacity: 0.5
    };
    var _opts;
    var methods = {
        _fixed_support: false,
        content: null,
        _body: '',
        isvisible: false,
        shouldvisible: false,
        ie_offset_x: 0,
        ie_offset_y: 0,
        init: function(options) {
            $(document).ready(function() {
                _opts = $.extend(_opts_default, options);
                //这句是精髓了
                methods._body = (window.opera) ? (document.compatMode == "CSS1Compat" ? $("html") : $("body")) : $("html,body");
                methods.content = $('<div>' + _opts.html + "</div>").css({
                    opacity: 0,
                    cursor: "pointer"
                }).attr({
                    title: _opts.title
                }).click(function() {
                    methods.scrollup();
                    return false;
                }).appendTo("body").Fixed({
                    'right': 35,
                    'bottom': 35
                });
                methods.togglecontrol();
                $(window).bind("scroll resize",
                function(e) {
                    methods.togglecontrol();
                });
            });
        },
        scrollup: function() {
            this.content.hide();
            var dest = isNaN(_opts.scrollto) ? _opts.scrollto: parseInt(_opts.scrollto);
            if (typeof dest == "string" && jQuery("#" + dest).length == 1) {
                dest = $("#" + dest).offset().top;
            } else {
                dest = 0;
            }
            this._body.animate({
                scrollTop: dest
            },
            this.scrollduration);
        },
        togglecontrol: function() {
            var scrolltop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;
            this.shouldvisible = (scrolltop >= _opts.startline) ? true: false;
            if (this.shouldvisible && !this.isvisible) {
                this.content.show();
                this.content.stop().animate({
                    opacity: _opts.opacity
                },
                _opts.fadeduration[0]);
                this.isvisible = true;
            } else if (!this.shouldvisible && this.isvisible) {
                this.content.stop().animate({
                    opacity: 0
                },
                _opts.fadeduration[1]);
                this.isvisible = false;
                this.content.hide();
            } else if (this.shouldvisible && this.isvisible) {
                this.content.show();
            } else if (!this.shouldvisible && !this.isvisible) {
                this.content.hide();
            }
        }
    };
    $.ToTop = function(options) {
        methods.init(options);
    };
})(jQuery);

(function($) {
    $.fn.Fixed = function(options) {
        var fix_opts = $.extend({
            top: undefined,
            left: undefined,
            right: undefined,
            bottom: undefined
        },
        options);
        var fixed = !document.all || document.all && document.compatMode == "CSS1Compat" && window.XMLHttpRequest;
        //if(fixed) {
        $(this).css('position', (fixed ? 'fixed': 'absolute'));
        if (fix_opts.top != undefined) $(this).css('top', fix_opts.top);
        if (fix_opts.left != undefined) $(this).css('left', fix_opts.left);
        if (fix_opts.right != undefined) $(this).css('right', fix_opts.right);
        if (fix_opts.bottom != undefined) $(this).css('bottom', fix_opts.bottom);
        /*这里好像在搜狗的IE模式下有问题,我也不知道怎么办了
        }
        else
        {
			$(this).attr('style',
    			'_position:'+(fixed?'fixed':'absolute')+';'+
    			(fix_opts.top==undefined?'':'_top:'+fix_opts.top+';')+
    			(fix_opts.left==undefined?'':'_left:'+fix_opts.left+';')+
    			(fix_opts.right==undefined?'':'_right:'+fix_opts.right+';')+
    			(fix_opts.bottom==undefined?'':'_bottom:'+fix_opts.bottom+';')
    		);
    		alert($(this).attr('style'));
        }
        */
        function pageX(elem) {
            return elem.offsetParent ? elem.offsetLeft + pageX(elem.offsetParent) : elem.offsetLeft;
        }
        function pageY(elem) {
            return elem.offsetParent ? elem.offsetTop + pageY(elem.offsetParent) : elem.offsetTop;
        }
        var _x = pageX($(this)[0]);
        var _y = pageY($(this)[0]);
        if (!fixed) {
            var self = $(this);
            $(window).bind("scroll resize",
            function(e) {
                var _scrltp = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;
                var _scrllft = document.documentElement.scrollLeft || window.pageXOffset || document.body.scrollLeft;
                self.css({
                    'top': _scrltp + _y,
                    'left': _scrllft + _x
                });
            });
        }
        return $(this);
    };
})(jQuery);
至于Quircks模式,看 这里

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值